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로 만든 다음 아래 코드와 같이 두 번째 -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

간단한; check is (": hidden")은 아직 숨겨져 있지 않은 잘못된 값을 반환합니다. 음수 오버플로로 인해 표시되지 않습니다. add

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