淡入（） - 爲什麼這些組合的工作/不工作

我有這樣的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

淡入（） - 爲什麼這些組合的工作/不工作

回答

相關問題