jQuery的淡入淡出結構化div元素

Question

我建立我的自動幻燈片下面的http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

的JS的說明是這樣的：

setInterval(function() { 
    $('#singleSlideshow #slideItem:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#singleSlideshow'); 
    }, 3000); 

這工作得很好，對內容領域，只有一個元素以淡入/淡出，如：

<div id="slideShow"> 
    <img src="www.pictures.com/somepic.png"/>   
    <img src="www.pictures.com/anotherpic.png"/> 
    <img src="www.pictures.com/theonepic.png"/> 
</div> 

，但我想我的頁面，該結構化元素之間切換另一個幻燈片。

<div id="newsItem"> 
    <img class="newsImg" src="./somepic"/> 
    <div id="newsTitle">Testnews 1</div> 
    <div id="newsDate">01.01.2014</div> 
    <div id="newsText">this is the first news text...</div> 
</div> 

，你可以在這裏看到：http://jsfiddle.net/ehLdW/4/

---編輯--- 我打了一下週圍，靜下心來，錯誤的腳本... 我改變了我的腳本工作以相反的順序

setInterval(function() { 
    $('#singleSlideshow #slideItem:last') 
     .fadeOut(1000) 
     .prev() 
     .fadeIn(1000) 
     .end() 
     .prependTo('#singleSlideshow'); 
    }, 3000); 

問題仍然是一樣的 - 沒有交叉淡入淡出的效果，但只有一個淡入淡出的動畫。 有趣的是，原始版本只顯示新元素 的fadeIn轉換，相反，反轉版本只顯示當前元素的fadeOut轉換。

所以它總是顯示元素的效果，具有較高的指數 我已經有了如何解決這個問題毫無頭緒......

Answer 1

假設我理解你想要什麼，你想有2幻燈片顯示在同一頁面上，具有不同的定時/轉換時間，並且每個都需要顯示自己獨立的混合內容（圖像和/或其他div）。

的jsfiddle演示Here

的HTML：

<div id="slideshow1"> 
    <div> 
     <div style="color:red;">Content in first child of slideshow1</div> 
     <div style="color:blue;">More content in first child of slideshow1</div> 
    </div> 
    <div> 
    Content in second child of slideshow1 
    </div> 
    <div> 
    Content in third child of slideshow1 
    </div> 
</div> 

<div id="slideshow2"> 
    <div> 
     <div style="color:red;">Content in first child of SLIDSHOW2</div> 
     <div style="color:blue;">More content in first child of SLIDESHOW2</div> 
    </div> 
    <div> 
    Content in second child SLIDESHOW2 
    </div> 
    <div> 
    Content in third child SLIDESHOW2 
    </div> 
</div> 

jQuery的：

$("#slideshow1 > div:gt(0)").hide(); 

setInterval(function() { 
    $('#slideshow1 > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow1'); 
}, 3000); 

$("#slideshow2 > div:gt(0)").hide(); 

setInterval(function() { 
    $('#slideshow2 > div:first') 
    .fadeOut(2000) 
    .next() 
    .fadeIn(2000) 
    .end() 
    .appendTo('#slideshow2'); 
}, 4500); 

的CSS：

#slideshow1 { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
} 

#slideshow1 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
} 

#slideshow2 { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
} 

#slideshow2 > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}