Question

我的网站底部有一组5个社交媒体图标，当我尝试使用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 个答案: