Question

以下工作正常 - 但是一切似乎都会立即发生 - 我希望第一次切换完成关闭然后继续打开下一个

$(".masinfo").click(function(){ 
var divToShow = "."+$(this).attr('href').replace('#', '');
if (!$(divToShow).hasClass("activeBlock")) {
    $(".activeBlock").slideToggle("slow"); 
    $("#content .blocks").removeClass("activeBlock"); // finish here

    $(divToShow).slideToggle("slow"); // then start this one?
    $(divToShow).addClass( "activeBlock" );

}else{
    $(".activeBlock").slideToggle("slow"); 
    $("#content .blocks").removeClass("activeBlock");
}
return false; 
});

Answer 1

您想使用complete函数作为第二个参数传递给slideToggle函数。

所以你的代码看起来像这样：

$(".masinfo").click(function(){ 
var divToShow = "."+$(this).attr('href').replace('#', '');
if (!$(divToShow).hasClass("activeBlock")) {
    $(".activeBlock").slideToggle("slow", function(){
         $("#content .blocks").removeClass("activeBlock"); 

        $(divToShow).slideToggle("slow"); 
       $(divToShow).addClass( "activeBlock" );

   }); 

}else{
    $(".activeBlock").slideToggle("slow"); 
    $("#content .blocks").removeClass("activeBlock");
}
return false; 
});

Answer 2

尝试

var $blocks = $("#content .blocks");
$(".masinfo").click(function () {
    var divToShow = "." + $(this).attr('href').replace('#', '');
    var $divToShow = $(divToShow);
    if ($divToShow.hasClass("activeBlock")) {
        $divToShow.slideUp("slow");
        $divToShow.removeClass("activeBlock");
    } else {
        var $active = $blocks.not($divToShow).filter(':visible');
        if ($active.length) {
            $active.slideToggle("slow", function () {
                $divToShow.slideDown("slow"); // then start this one?
                $divToShow.addClass("activeBlock");
            });
            $active.removeClass("activeBlock"); // finish here
        } else {
            $divToShow.slideDown("slow"); // then start this one?
            $divToShow.addClass("activeBlock");
        }

    }
    return false;
});

演示：Fiddle

Answer 3

您可以使用：

.delay()（http://api.jquery.com/delay/）

或

setTimeout()（http://www.jquery4u.com/jquery-functions/settimeout-example/）

为了在两者之间插入几毫秒。

在开始下一个之前完成jquery切换

3 个答案: