1

ホバーを使用してナビゲーションボタンを上下に移動するナビゲーションを作成しようとしています。クリックしてボタンを選択すると、ホバーを停止したいのですが、うまくいきます。ナビゲーションで別のボタンを選択したときにホバー アニメーションをバインドするにはどうすればよいですか? 現在のところ、それは無制限のままであり、クリックするとすべてのボタンが無制限になります。foreach()?

jQuery を使用してからしばらく経ちましたが、少し助けが必要です。

また、私は最初に mouseOver() と mouseOut() を使用していましたが、ホバーの方が使いやすいと読みました。これは正しいです？

フィドルを正しく実行すると、画像を使用しなくてもより良いアイデアが得られます。 http://jsfiddle.net/cs_what/WP9TT/

4

1 に答える 1

2

イベントの委任により、これが簡単になります。

google.load("jquery", "1.6.2");
google.setOnLoadCallback(function(){
    $(".horzNavigation").delegate("ul > li > a:not(.active)",{
        "mouseenter": function(){
            $(this).stop(true,true).animate({"top": "-=60px"}, 250, 'swing');
        },
        "mouseleave": function(){
            $(this).stop(true,true).animate({"top": "+=60px"}, 250, 'swing');
        }
    }).delegate("ul > li > a","click",function(event){
        $(this).addClass('active').parent().siblings().children('.active').removeClass('active');
    });
});

また、コードにタイプミスがあると想定しました。ul要素にアンカータグを直接含めることはできないためli、セレクターにタグを追加しました。無効なhtmlは、異なるブラウザで一貫性のない結果をもたらす可能性があります。

于 2012-08-07T20:47:44.373 に答える