jQuery 슬라이드가 제대로 작동하지 않습니다.

Question

slideUp() 메서드와 관련된 문제가 있습니다. 마지막 요소 (패널 3)에서만 작동합니다. 첫 번째 두 개가 아래로 내려 가고 왜 나는 모릅니다. jQuery로 시작했고 실제로는 초보자입니다.

다음은 jQuery 코드입니다 :

$(document).ready(function() { 

    $('.panel').on('click', function() { 
     $(this).slideUp(600); 
    }); 

}); 

그리고 여기 JSfiddle입니다 ->

http://jsfiddle.net/py4tfq3f/2/이 당신의 시간을 주셔서 감사합니다!

Answer 1

panel div에서 float:left으로 display:inline-block을 변경하면 문제가 해결됩니다.

는 DEMO

CSS :

는

.panel { 
    margin: 50px 0 0 10px; 
    width: 200px; 
    height: 200px; 
    font-family: tahoma; 
    float:left; 
    border: 2px solid gray; 
    border-radius: 5px; 
    overflow: hidden; 
}