JQUERY，创建面板，淡入/淡出

Question

我在我的页面上有一个DIV，我希望能够切换卡/ div以淡入淡出&。

断码：

$('.toogle-link').live('click', function() { 
    var toogleID = $(this).attr("name"); 

    $('.carditem').fadeOut(function() { 
     // Animation complete show correct card 
     $('#' + toogleID).fadeIn(); 
    }); 

    return false; 

}); 

问题是淡出完成，这是造成卡片堆栈了一会儿，看起来可怕与当前卡淡出，新卡在衰落前的淡入正在发生。 有任何想法吗？

Answer 1

它看起来像你就忘记了时间参数：

.fadeOut（[时间]，[回调]）

试试这个：

$('.toogle-link').live('click', function() { 
    var toogleID = $(this).attr("name"); 

    $('.carditem').fadeOut("slow", function() { 
    // Animation complete show correct card 
    $('#' + toogleID).fadeIn(); 
}); 

return false; 

}）;

Answer 2

根据使用的其他jQuery可能会发生这种情况。

您可以手动设置持续时间，然后对fadeIn使用超时，调用.hide（）并消除fadeOut效果。

用户Marek对official site发表了评论。

Answer 3

我想我有同样的问题，我通过隐藏它完全显示了正确的

$('.toogle-link').live('click', function() { 
    var toogleID = $(this).attr("name"); 

    $('.carditem').fadeOut(function() { 
     $('.carditem').css("display", "none"); // this do the trick 
     // Animation complete show correct card 
     $('#' + toogleID).fadeIn(); 
    }); 

    return false; 

}); 

我不知道这是最好的解决方案之前解决，但它工作正常。

问题是元素不是100％不可见的，你必须在显示另一个元素之前完全隐藏它。也许延迟fadeIn之前可以解决这个问题。