jquery crossfade structured div elements

Question

i've build my auto-slideshow following the instructions of http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

the js looks like this:

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

this works fine, for content areas, with only one element to fadeIn/fadeOut, e.g.:

<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>

but i want another slideshow on my page, that toggles between structured elements.

 <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>

you can see it here: http://jsfiddle.net/ehLdW/4/

---edit--- i played around a bit to get down to the error in the script... i changed my script to work in reverse order

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

the problem is still the same - no cross fade effect, but only one fade animation. interesting is, that the original version showed only the fadeIn transition of the new element in contrary the reversed order version shows only the fadeOut transition of the current element.

so it always shows the effect of the element, with the higher index i've got no clue on how to fix that...

Answer 1

Assuming I understand what you are wanting, You want to have 2 slideshows on the same page, with different timings/transition times and each needs to display its own separate mixed content (images and/or other divs).

JSFIDDLE Demo Here

The 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>

The 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);

The 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; 
}