jquery show hide div一步一步

Question

我知道这可能是一个noob问题...

这是demo，但我的问题是动画同时工作...... 我的意思是当DIV1打开并且你打开DIV2它同时工作。是否有机会让它一步一步地发挥作用。打开DIV1并点击DIV2打开时，应首先关闭DIV1而不是打开DIV2。

    $('.navLink').on('click', function(e){
    e.preventDefault();
    var targetDiv = $($(this).attr('href'));
    if(!targetDiv.is(':visible')){
        $('.page').slideUp();
        targetDiv.slideDown();
    }else{
        $('.page').slideUp();
    }
});

Answer 1

尝试像这样添加延迟：

$('.page').slideUp().delay(1000);

这是JSFiddle：      http://jsfiddle.net/fKGc5/118/

Answer 2

您可以添加setTimeout

$('.navLink').on('click', function(e){
    e.preventDefault();
    var targetDiv = $($(this).attr('href'));
    if(!targetDiv.is(':visible')){
        $('.page').slideUp();
        setTimeout(function(){targetDiv.slideDown()}, 500); //edited this line only

    }else{
        $('.page').slideUp();
    }
});

JS Fiddle Demo

Answer 3

您可以在slideUp上指定完整的回调，然后触发slideDown

$('.page').slideUp({
    complete: function() {
         targetDiv.slideDown();
    }
});