jquery - JQueryUI弹跳效果：动画发生时div消失

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>s 和反弹的问题。将它们更改为左浮动的 div，似乎没问题