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; 
});