JQuery淡入順序不同元素類型的子元素

我正在嘗試使用jQuery的父元素的子元素fadeIn()。兒童元素都是不同的類型。JQuery淡入順序不同元素類型的子元素

例如我的父元素之一可能是這樣的：

<div class="section-content-parent">` 
    <span class="section-content-header">SPAN CONTENT</span> 
    <img src="#"> 
    <span class="section-content-subheader">SUBHEADER CONTENT</span> 
</div>

我想爲<span>和<img>元素fadeIn()。 如果可能的話，按照一個接一個的順序，或者一次全部。

孩子的元素會有所不同，並不總是具體的<span>和<img>元素，因此針對特定元素類型是不成問題的。

我已經試過：

$(document).ready(function(){ 
    $(".section-content-parent").children().fadeIn(slow); 
});

什麼也沒有發生。有人能帶領我走向正確的方向嗎？

來源

2015-11-18 Jesse Elser

錯字：'淡入（慢）;'應該是'淡入（「慢」）;'你的[JavaScript控制檯]（http://webmasters.stackexchange.com/questions/8525/how在不同的瀏覽器中打開javascript-console）應該抱怨未定義的變量。修復後的[Works]（http://codepen.io/paulroub/pen/RWdjqZ）。 –

slow是一個字符串參數，不可變。你需要fadeIn（「慢」）。在調用fadeIn之前，還需要先隱藏所有元素。看看這個：https://fiddle.jshell.net/a2n234eq/7/ – DinoMyte

我明白了。有了你的意見，我已經能夠得到它的工作。在旁邊注意，如果我希望它是順序的話。 –

回調和遞歸？呸騙子！ :-)

你也可以試試這個簡單的，非回調的解決方案：

var elems = $('.section-content-parent').children(); 

$(elems).each(function(index) { 
    $(this).delay(1200*index).fadeIn(1000); 
});

看到它在行動：https://jsfiddle.net/fppjkv0o/30/

來源：https://stackoverflow.com/a/4661858/1152633

使其可重複使用其他的父元素：

function fadeInChildren(parent) { 
    var elems = $(parent).children(); 

    $(elems).each(function(index) { 
     $(this).delay(1200*index).fadeIn(1000); 
    }); 
}

和使用功能李柯本：

fadeInChildren('.section-content-parent');

來源

2015-11-18 21:35:55 skippr

Bah如果只是你發佈了這個更快我會接受這一個。我實際上使用過你的，因爲我使用不透明度設置從fadeIn切換到了fadeTo，這樣，我的父元素在兒童淡入時沒有顯示尺寸變化。 –

我的建議（我認爲SO在這裏說的也是）至少在選擇答案前一兩天，以便像我這樣的人不會認爲「哦，它已經回答」並繼續前進。很多問題都受到這個問題困擾，看到選定的答案比其他答案少得多的情況並不罕見。無論哪種方式，很高興它幫助！ – skippr

是的，這將是很好的等待大聲笑我只是不喜歡讓別人綁在我的問題上，如果我找到一個工作的答案:)再次感謝 –

爲了讓他們淡出後相互我們可以使用回調方法與衰落。

首先，添加這一功能，所以我們可以把它叫做遞歸

function fadeChildrenIn(childNum){ 

    var children = $("#section-content-parent").children(); 

    var $child = $(children[childNum]); 
    $child.fadeIn(function(){ 
     if(childNum < children.length) 
      fadeChildrenIn(++childNum); 
    }); 
}

然後當你想要的事件發生，您可以使用

fadeChildrenIn(0);

的說法是，我們正在消退孩子的指標，如果再檢查該指數小於總孩子，如果函數它是當前的孩子已經褪色它移動到下一個，如果沒有更多的孩子離開只是停止。

這也將滿足您處理任何類型的子元素IE的需求。 span，img等

來源

2015-11-18 21:23:20 samuelmr

我喜歡它的工作原理。謝謝 –

JQuery淡入順序不同元素類型的子元素

回答

相關問題