切换动画不起作用

时间:2014-07-29 20:33:57

标签: jquery toggle

我正在进行切换以显示隐藏的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" );
    });
});

......为什么这不起作用? 非常感谢任何意见,

1 个答案:

答案 0 :(得分: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的slideToggle不接受两个回调,只有一个回调,没有内置的切换功能。

FIDDLE