jquery - jQuery スライダーが期待どおりに動作しない

Question

誰かが見て、私がここで間違ったことを説明してくれませんか?

矢印が反転していて、正しく動作させるには 2 回クリックする必要があります。

これを行うより良い方法はありますか？

ありがとう。

このリンクを参照してください: http://jsfiddle.net/ddub/j3Dfr/

Answer 1

現在、以下のコードがあります...

// sliding load board search option
$(document).ready(function () {
    $(".topMenuAction").click(function () {
        if ($("#openCloseIdentifier").is(":hidden")) {

                $("#slider").animate({
                    marginTop: "-55px"  //adjust as needed
                }, 390);


            $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-4P1KGHJcd7w/T6MFfHRttBI/AAAAAAAACNA/JgwzfhkIrAs/w208-h208-n-k/arrow-up.png"  height="50px" width="50px" alt="open" />');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({
                marginTop: "24px"
            }, 350);
            $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-Xgkkkl6QmoM/T6MFfAqNwWI/AAAAAAAACNA/Ghf_F21rz0E/w208-h208-n-k/arrow-down.png"  height="50px" width="50px"alt="close" />');
            $("#openCloseIdentifier").hide();
        }
    });
});​

主な問題は、marginTop アニメーションが後方にあることです。以下のコードのように、最初のものを -55px ではなく 24px にし、次に 2 番目を 24px ではなく -55px にすると、期待どおりに動作するはずです!

// sliding load board search option
$(document).ready(function () {
    $(".topMenuAction").click(function () {
        if ($("#openCloseIdentifier").is(":hidden")) {

                $("#slider").animate({
                    marginTop: "-55px"  // Changed this to -55px
                }, 390);


            $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-4P1KGHJcd7w/T6MFfHRttBI/AAAAAAAACNA/JgwzfhkIrAs/w208-h208-n-k/arrow-up.png"  height="50px" width="50px" alt="open" />');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({
                marginTop: "24px" // Changed this to 24px
            }, 350);
            $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-Xgkkkl6QmoM/T6MFfAqNwWI/AAAAAAAACNA/Ghf_F21rz0E/w208-h208-n-k/arrow-down.png"  height="50px" width="50px"alt="close" />');
            $("#openCloseIdentifier").hide();
        }
    });
});​

Answer 2

初期状態が状態と一致しませんhidden。それを修正すると、動作します。

$(document).ready(function () {
    $("#openCloseIdentifier").hide();
    $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-Xgkkkl6QmoM/T6MFfAqNwWI/AAAAAAAACNA/Ghf_F21rz0E/w208-h208-n-k/arrow-down.png"  height="50px" width="50px"alt="close" />');

    // Your original code...
}

'<img ...>'事前にパーツで文字列変数を定義することを検討することをお勧めします...

Answer 3

単純; is(":hidden") をチェックすると、まだ非表示になっていないため、間違った値が返されます。負のオーバーフローのために表示されないだけです。追加

 $("#openCloseIdentifier").hide();