jQuery 애니메이션 및 토글

Question

slideToggle 이벤트를 구현하고 동시에 애니메이션 기능을 구현하는 데 어려움을 겪고 있습니다.

예를 들어 사용자가 버튼을 클릭하면 버튼이 위로 이동 한 다음 아래에 div가 표시됩니다. 그러나 버튼을 다시 클릭하면 버튼이 원래 공간으로 돌아가 div가 사라지게하고 싶습니다.

$(function() { 
    $('.search').click(function() { 
    $(this).animate({ 
     top: '10px' 
    },'slow'); 

    $('.searchbox').slideToggle('slow'); 
    return false; 
    }); 
}); 

.search 버튼을 원래 위치로 되돌리려면 애니메이션 기능을 배치 할 방법이나 위치를 모르겠습니다.

Answer 1

사용

$('.search').toggle(function() { 
    $(this).animate({ 
     top: '10px' 
    },'slow',function(){ 
     $('.searchbox').slideToggle('slow'); 
    }); 
    return false; 
},function() { 
    $(this).animate({ 
     top: '0px' /*or original value*/ 
    },'slow',function(){ 
     $('.searchbox').slideToggle('slow'); 
    }); 
    return false; 
});