jquery - 切换动画不起作用

Question

我正在执行切换以显示隐藏的 div，如下所示:

jQuery('button').click(function(){
    jQuery("#area").slideToggle(function() {
        jQuery("#menu").animate({ "top": "+=423px" }, "slow" );
    });
});

但是，我希望在第二次单击时，不仅该区域再次隐藏，而且 #menu 再次上升到其原始位置。我尝试以下代码但无济于事:

jQuery('button').click(function(){
    jQuery("#area").slideToggle(function() {
        jQuery("#menu").animate({ "top": "+=423px" }, "slow" );
    },
    function() {
        jQuery("#menu").animate({ "top": "-=423px" }, "slow" );
    });
});

...为什么这不起作用？非常感谢您的任何意见，

Answer 1

您可以为此使用标志，例如检查元素是否隐藏，因为显示属性已切换

jQuery('button').click(function(){
    jQuery("#area").slideToggle(function() {
        var updown = $(this).is(':visible') ? '-=' : '+=';
        jQuery("#menu").stop(true, true).animate({ "top": updown + 423 + 'px' }, "slow" );
    });
});

请注意，jQuery 的 slipToggle 不接受两个回调，只接受一个，没有内置的切换功能。

FIDDLE