1

ホバーするとわずかに下に移動し、ホバーアウトすると再び戻るメインのナビゲーションボタンがあります。このボタンをクリックすると、大量の html を含むドロップダウン div が解放され、もう一度クリックすると、明らかにボックスが元に戻ります。ただし、ページ上のドロップダウンを持つ他のボタンは、互いに邪魔にならないようにする必要があるため、各ボタンは他のすべてのドロップダウン ボックスも閉じます。現在、トグルでそれを行っています。別のボタンでボックスを閉じる場合、メイン ボタンでドロップダウンを再度取得するには、2 回クリックする必要があります。

トグルは効率的ですが、if ステートメントでトグル スタイルの jquery アニメーションを行う効率的な方法は何でしょうか? クリックすると、下にアニメーション化され、上にアニメーション化され、下にアニメーション化されます。基本的にif部分の書き方がわかりません。if(:animated) のような例を見てきましたが、それは一般的なアニメーションがあったかどうかを示すものです。これを適用したいインスタンスがたくさんあるので、次のように具体的にする必要があります。

if(:animation).top = 150{ (div).animate(top = 0)} else {(div).animate(top = 150)}

また、ロールオーバーしてトップ ボタンが少し下に移動した場合、ドロップダウンがダウンし、ドロップダウンが元に戻ったときに元に戻るときに、どのようにキーを押したままにしますか?

ここにjsfiddleがあるので、私が話していることを簡単に見ることができます。完璧ではありませんが、私のホームページは似ています。混乱している部分があればお知らせください。これを編集します。

http://jsfiddle.net/9DN52/1/

4

1 に答える 1

1

私の意見では、あなたのコードは十分に効率的であるため、あなたがする必要があるのは、ホバーのアクションを停止するよりも、クリックされたかどうかを確認するためにクラスを追加するだけです。

jQuery：

$("#down").hover(
    function() {
        $(this).stop().animate({top:0},200);
    },
    function() {
        // this will alert the situation for you to understand
        alert($(this).hasClass("isDown"));
        // if its clicked than do not move!
        if ($(this).hasClass("isDown") == false) {
            $(this).stop().animate({top:-5},220);
        }
    }
);

$("#down").click(
    function() {
        $("#DropUp").stop().animate({bottom:-250},220);
        // Add a class to see if its clicked
        $(this).toggleClass("isDown");
    }
);

あなたのフィドルを回避しました：http：//jsfiddle.net/9DN52/14/

編集：

また、いくつかのバグを解決し、いくつかのコードを修正し、説明を追加しました。実際にやりたいことはこれだと思いました。

jQuery：

// Actually you can do this with css transition
// Remove these descriptions for a cleaner looking code
$("#down").hover(
    function() { $(this).stop().animate({top:0},200); },
    function() {
        // if its clicked than do not move!
        if ($(this).hasClass("isDown") == false) {
            $(this).stop().animate({top:-5},220);
        }
    }
);
// Instead of toggle simple click action is enough
$("#down").click( function() {
    // Thanks to class selector now we know
    // if its clicked or down, so we know what to do..
    if ($("#down").hasClass("isDown") == false) {
        $("#DropDown").stop().animate({top:0},250);
        // if footer is up already this will hide it
        $("#DropUp").stop().animate({bottom:-250},220);
        $("#up").removeClass("isUp");
    } else {
        $("#DropDown").stop().animate({top:-250},220);
    }
    // Each click should change the down situation
    $("#down").toggleClass("isDown");
});
// Instead of toggle simple click action is enough
$("#up").click( function() {
    // If its up already
    if ($(this).hasClass("isUp") == false) {
        $("#DropUp").stop().animate({bottom:0},250);
        // if header is down already this will hide it
        $("#DropDown").stop().animate({top:-250},220);
        $("#down").stop().animate({top:-5},220).removeClass("isDown");
    } else {
        $("#DropUp").stop().animate({bottom:-250},220);
    }
    // Each click should change the up situation
    $("#up").toggleClass("isUp");
});

フィドル： http： //jsfiddle.net/9DN52/43/

于 2012-11-29T08:17:19.530 に答える