[英]jQuery: animate() on social media icons
我在网站底部有一组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;
}
尝试这个
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.