Question

我的页面上有一个DIV，我希望能够将卡/ div切换到fadeIN＆amp;出来的。

破碎的代码：

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

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

    return false;

});

问题是FadeIn正在fadeOut完成之前发生，这导致卡片堆叠一段时间看起来很糟糕，而当前的卡片逐渐消失，新卡片逐渐消失。任何想法？

Answer 1

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

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

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

Answer 2

我想我遇到了同样的问题，我通过在显示正确的

之前完全隐藏它来解决

$('.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之前的延迟也可以解决这个问题。

Answer 3

看起来您忘记了持续时间参数：

.fadeOut（[duration]，[callback]）

试试这个：

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

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

return false;

}）;

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

3 个答案: