1

何が間違っているのかわかりませんが、何も正しくありません。基本的には問題なく動作しますが、別のリストアイテムにカーソルを合わせると、アニメーションが開始され、前のアイテムが残ります。

これがJSの部分です...

$('nav#topMenu li').on('mouseenter mouseleave', function(e) {
    if(e.type === 'mouseenter') {
        $(this).append('<span class="active"></span>');
        $('span.active').stop().slideDown('200');
    } else {
        $('span.active').stop().slideUp('200', function() {
            $(this).remove();
        });
    }
});

これがJSフィドルです： JSフィドルリダイレクト

その醜いホバーの背景色でごめんなさい...私が間違っていることはわかりませんが...すべてが間違っているようです！任意の解決策をいただければ幸いです。ありがとうございました。

編集： リストアイテムにすでに追加されている場合でも、すべてのホバーにそのスパンを追加しているように見えます。ああ、私の..。

4

3 に答える 3

1

アニメーションがで完了しているかどうかを確認し.is(":animated")ます。$('span.active')クラスですべての要素を選択するため、要素間でカーソルactiveを移動すると、すべての要素のアニメーションが効果的に停止します。既存のアニメーションを実行していないという条件で、これらの要素にさらにアニメーションを適用する必要があります。

DEMOを参照してください。

$(function () {
    $('nav#topMenu li').on('mouseenter mouseleave', function(e) {
        if(e.type === 'mouseenter') {
            $(this).append('<span class="active"></span>');
            $('span.active').each(function() {
                if (!$(this).is(":animated")) {
                    $(this).stop().slideDown('200');
                }
            });
        } else {
            $('span.active').stop().slideUp('200', function() {
                    $(this).remove();
            });
        }
    });
});
于 2013-02-04T14:44:46.960 に答える
1

これは、両方のスパンにまだクラスがあるために発生していactiveます。mouseleaveが最初に発生しますが、両方のスパンでmouseenterトリガー.stop().slideDown()されます。

.removeClass('active')考えられる解決策はいくつかありますが、1つはスパンで使用することだと思います（同じスタイルの別のクラスを追加する可能性があります）。これにより、真のアクティブスパンが下にスライドする間、完全に上にスライドします。

http://jsfiddle.net/ExplosionPIlls/HL7Aj/1/

于 2013-02-04T14:40:54.647 に答える
0

交換すると思います

$（'span.active'）。stop（）

と

$（this）.find（'span.active'）。stop（）

あなたを助けるかもしれません。

于 2013-02-04T14:47:06.550 に答える