2

正常に動作するコードをいくつか作成しましたが、このアニメーションは初めて動作し、その後はロードして表示するだけです（アニメーションなし）

$(document).ready(function () {
    $("li.moreInfo").hide();

    $("a").mouseover(function () {
        var t = $(this);
        t.parent().next().eq(0).show();
        t.parent().next().animate({ width: '300px' }, 2000, 'easeOutBounce');
    });

    $("a").mouseleave(function () {
        var t = $(this);
        $(this).parent().next().hide(500);
    });
});

HTMLはここにあります：

<div style="position:relative;">
    <ul>
        <li><a href="#">Section 1</a></li>
        <li class="moreInfo">More Info</li>
        <li><a href="#">Section 2</a></li>
        <li class="moreInfo">Second More Info</li>
        <li><a href="#">Section 3</a></li>
        <li class="moreInfo">More Info</li>
        <li><a href="#">Section 4</a></li>
        <li class="moreInfo">Second More Info</li>
    </ul>
</div>

アイテムにマウスオーバーすると、初めて効果（easeOutBounceとゆっくり動く）が得られますが、同じことを2回繰り返すと、ゆっくり動く効果もeaseOutBounce効果も表示されません。ロードするだけで、非常に高速です。キャッシングの可能性があると思いますが、回避する方法がわかりません。

この問題を解決するために私を助けてくれませんか？

更新：HTMLコードもJsFiddleリンクを投稿しました-> http://jsfiddle.net/QYry5

4

1 に答える 1

0

JSとCSSで変更しました：

JS：

t.parent().next().eq(0).show(2000,'easeOutBounce');

CSS：

.moreInfo
        {
            display:block;
            background-color: #eee;
            border: 1px solid Yellow;
            width:300px;                
        }

更新されたjsFiddleは次のとおりです。

http://jsfiddle.net/QYry5/1/

問題は幅だけにありました。最初のアニメーションの後、300pxの幅を取得するため、2回目のアニメーションのスコープはなくなりました。幅だけで再生したい場合は、mouseleaveイベントで幅をリセットする必要があります。

マウスオーバー時：

t.parent().next().animate({ width: '+=300px' }, 2000, 'easeOutBounce');

マウスリーブ：

t.parent().next().animate({ width: '-=300px' }, 2000, 'easeOutBounce',function(){$(this).hide()});

これは、このために更新されたjsFiddleです。

http://jsfiddle.net/QYry5/2/

于 2012-12-11T13:04:55.667 に答える