jquery - fadeIn() - 为什么这些组合有效/无效

Question

我有这个CSS:

.tracklistOff{display:none;}
.tracklistOn{width:710px; float:left;}
.trackon{width:710px; float:left;}

此 HTML:

<div class="tracklistOff">
    <div class="trackon">
        ... somethings...
    </div>
</div>

现在，使用以下代码:

$('.tracklistOff').find('.trackon').clone().fadeIn(600).insertAfter('.tracklistOn');

我得到了 fadeIn() 效果(这对我来说很奇怪；trackon 没有 display:none; 属性)。

使用此代码:

$('.tracklistOff').find('.trackon').clone().insertAfter('.tracklistOn').fadeIn(600);

fadeIn()效果没有显示。为什么改变相同元素的位置 fadeIn() 有效或无效？

Answer 1

fadeIn是 animate({ opacity: "show" }) 的快捷方式。在此函数中，有一个条件来检查当前元素是否可见。如果该元素已经可见，则此函数不执行任何操作。

因此，您的代码中的问题是第一个示例 .trackon当 fadeIn 时不可见被调用，而不是在第二个 .trackon 中当 fadeIn 时已经可见被调用，因此该函数不执行任何操作。

var working = $('.tracklistOff').find('.trackon').clone();
var notWorking = $('.tracklistOff').find('.trackon').clone().insertAfter('.tracklistOn');

console.log(working.is(':hidden')); // true
console.log(notWorking.is(':hidden')); // false