淡入（） - 为什么这些组合的工作/不工作

我有这样的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（）是否工作？

来源

2011-04-22 markzzz

'tracklistOn'情况/字幕是在脚本和CSS的不同..尝试匹配那些.. – niksvp 2011-04-22 10:59:25

噢，不对不起，我只是错误的复制和粘贴在这里的代码！代码在我的脚本上是正确的！ – markzzz 2011-04-22 11:55:25

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

来源

2011-04-22 12:41:09

uhm，其实当我克隆它应该是可见的（只是tracklistOff隐藏，而不是trackon）。也许是不可见的，因为它尚未添加！我想我应该克隆，隐藏，插入和淡入淡出，你觉得怎么样？ – markzzz 2011-04-22 12:57:52

在你的例子中，.trackon不是可见的，因为它是一个隐藏元素的子元素，但看起来你是对的：如果你克隆了一个可见元素，它是隐藏的，因为它不被附加到DOM中的某处：P – 2011-04-22 13:08:00

'的console.log（$（ '身体'）是（ '：隐藏'））;/* false */ console.log（$（'body'）。clone（）。is（'：hidden'））;/* true * /' – 2011-04-22 13:11:29

淡入（） - 为什么这些组合的工作/不工作

回答

相关问题