我已经对列表中的一些图像实现了 JQuery 反弹效果。该列表设置为水平的,具有以下 css:
#sociallinks li{
list-style:none;
display: inline;
}
反弹效果与mouseover()
. 但是,当我将鼠标悬停在列表中的图像上时,列表会恢复到正常垂直状态(即<li>'s
松散的位置)。一旦反弹动画结束,图像就会恢复其正常位置。
有谁知道在动画发生时如何保持元素的位置?
谢谢!
我的完整代码:
#sociallinks li{
list-style:none;
display: inline;
padding: 5px;
width: 40px;
}
<script>
$(function(){
$('.socialicon').mouseover(function () {
$(this).effect("bounce", { times:5 }, 300);
});
});
</script>
<ul>
<li class="socialicon"><img src="assets/images/facebookicon.png"></li>
<li class="socialicon"><img src="assets/images/twittericon.png"></li>
<li class="socialicon"><img src="assets/images/pinteresticon.png"></li>
</ul>