0

リスト内のいくつかの画像に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>
4

1 に答える 1

0

Seems to be an issue with using <li>s and bounce. Changed them to divs with float left and seems to be ok

于 2012-08-07T00:13:19.300 に答える