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被调用，所以函数什么都不做。

{{1}}

fadeIn（） - 为什么这些组合工作/不工作

1 个答案: