Question

I’ve been working on this scripts and can’t seem to get any help.

I have it on my fiddle. Basically I have some divs and I wanted them to fade in and fade out which they are doing right now correctly.

However, when content 1 is fading out, content 2 must be coming in at the same time, (I guess the opacity must be lighter) for the smoother transition.

Right now as content 1 fades out, it leaves a white spacing before Content 2 comes in.

JavaScript:

$(function(){
     function fadeMyContent() {

         $(".thecontent:first").fadeIn(700).delay(1000).fadeOut(700,
             function() {    
                     $(this).appendTo($(this).parent());   
                     fadeMyContent();    
             });
      }
     fadeMyContent();
});

HTML:

<ul>
     <li class='thecontent'> CONTENT 1</li>
     <li class='thecontent'> CONTENT 2</li>
     <li class='thecontent'> CONTENT 3</li>
     <li class='thecontent'> CONTENT 4</li>
<ul>

http://jsfiddle.net/myislandshop/wV6Tk/5/

Answer 1

I’ve got you a solution. I’m using images in my JSFiddle, but they’re only to demonstrate the effect. Fading between black backgrounds is difficult; I suggest you give the ul a black background and fade the text/content above it in and out; it will give a nicer effect.

This is the code from the Fiddle. If you need an explanation, please ask.

function fadeDivs()
{
    var currentPanel = $("ul li:visible");
    var currentPanelIndex = currentPanel.index();

    currentPanel.fadeOut(1000);

    // If the next panel to fade in is beyond the last, start from the beginning again.
    if(currentPanelIndex == ($("ul li").length - 1))
    {
        $("ul li:first-child").fadeIn(1000);
    }
    else    // If it's not the last li, keep going through the list
    {
        currentPanel.next().fadeIn(1000);
    }

    // Keep the ball rolling
    setTimeout(fadeDivs, 5000);
}

$(document).ready(function() {
    // Just to make it look nice - this can be deleted (it's just filler content)
    $("ul li:eq(0)").html("<img src='http://barbados.org/landscap/bcparadise1.jpg'>");
    $("ul li:eq(1)").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>");
    $("ul li:eq(2)").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>");
    $("ul li:eq(3)").html("<img src='http://www.croatia-danexumag.com/cms_upload/upload/Apartments_VERUDELA_BEACH_00.jpg'>");

    // Start the ball rolling
    setTimeout(fadeDivs, 3000);
});

The images are licensed under blah blah who cares, bring on the lawsuit for me stealing your beach 😉