Question

我已经对列表中的某些图像实现了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>

Answer 1

使用<li>和弹跳似乎是一个问题。将它们更改为具有浮动左侧的div并且似乎没问题

JQueryUI Bounce Effect：div在动画发生时消失

1 个答案: