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动画就是倒退。如果你将第一个24px而不是-55px，然后第二个-55px而不是24px，就像下面的代码一样，它应该像你期待的那样行事！

// 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状态不匹配;修复，it works。

$(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

简单;检查是（“：hidden”）返回错误的值，因为它尚未被隐藏 - 由于负溢出，它只是不可见。 add

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