클릭하면 div 레이어 이동

Question

div 레이어 200 픽셀을 위아래로 움직이는 작고 간단한 코드를 만들었습니다. 그러나 마우스 오버 대신 클릭하여 레이어를 이동 시키길 원합니다. mouseleave는 여전히 괜찮습니다!

레이어가 위아래로 있는지 확인하려면 어떻게해야합니까? 레이어가 200 픽셀 이상인 경우에만 레이어 -200 픽셀을 이동하려고합니다.

<script> 
    $(".block").mouseenter(function() { 
    $(".block").animate({"bottom": "+=200px"}, 300); 
    }).mouseleave(function() { 
     $(".block").animate({"bottom": "-=200px"}, 200); 
    }); 
</script> 

Answer 1

<script> 
    $(".block").click(function() { 
    $(".block").not('.up').addClass('up').animate({"bottom": "+=200px"}, 300); 
    }).mouseleave(function() { 
    $(".block").filter('.up').removeClass('up').animate({"bottom": "-=200px"}, 200); 
    }); 
</script> 

Answer 2

는 대신 '.mouseenter'의 '.click'를 사용하려고 했 클래스를 사용할 수 있습니까?

Answer 3

<script> 
    var direction = 1; 
    var distance = 200; 
    $(".block").click(function() { 
    $(".block").animate({"bottom": "+=" + direction * distance + "px"}, 300); 
    direction -= direction * 2; // knew there was a formula for that :P 
    }); 
</script> 

이렇게하면됩니다.