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 动画只是向后。如果您将第一个设置为 24 像素而不是 -55 像素，然后将第二个设置为 -55 像素而不是 24 像素，就像下面的代码一样，它的行为应该符合您的预期！

// 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();