jQuery：社交媒體圖標上的animate（）

Question

我在網站底部有一組5個社交媒體圖標，當我嘗試使用animate()為它們animate() ，動畫將在懸停的圖標上起作用，但其他所有圖標也會移動。 任何想法如何解決這一問題？

這是我的代碼：

$(document).ready(function(){
  $('footer img').hover(function(){
    $(this).animate({width:'55px', height:'55px'}, 'fast');
      }, function(){
    $(this).animate({width:'50px', height:'50px'}, 'fast');
  });
});

這是我在頁腳中用於圖標的樣式：

.footer img{
  position: relative;
  width: 50px;
  margin-top: 100px;
  margin-right: 1.5em;
  margin-left: 1.5em;
}

Answer 1

嘗試這個

  $(document).ready(function(){ $('.footer img').hover(function(){ $(this).animate({width:'55px', height:'55px'}, 'fast'); }, function(){ $(this).animate({width:'50px', height:'50px'}, 'fast'); }); });

  .footer div { display:inline-block; height:70px; width:70px; } .magicClass{ display:inline-block; height:70px; width:5px; } .footer img{ position: relative; width: 50px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="footer" style="height:1000px"> <div> <img src="https://www.w3schools.com/images/colorpicker.gif"/> </div> <div class="magicClass"></div> <div> <img src="https://www.w3schools.com/images/colorpicker.gif"/> </div> <div class="magicClass"></div> <div> <img src="https://www.w3schools.com/images/colorpicker.gif"/> </div> </div> </body>

jQuery：社交媒體圖標上的animate（）

問題描述

1 個解決方案

解決方案1
0 已采納 2017-04-29 12:57:13

jQuery：社交媒體圖標上的animate（）

問題描述

1 個解決方案

解決方案1 0 已采納 2017-04-29 12:57:13

解決方案1
0 已采納 2017-04-29 12:57:13