jQuery fade contenu DIV

Question

Hey, j'ai travaillé sur ces scripts et voir pour obtenir de l'aide.

Je l'ai sur mon violon. Fondamentalement, j'ai quelques div s et je voulais qu'ils se fanent et disparaissent ce qu'ils font maintenant correctement.

Cependant, lorsque le contenu 1 disparaît, le contenu 2 doit entrer en même temps (je suppose que l'opacité doit être plus claire) pour une transition plus fluide. .

En ce moment, en tant que contenu 1 disparaît, il laisse un espace blanc avant que le contenu 2 est disponible en

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

Je vous ai une solution. J'utilise des images dans mon JSFiddle, mais elles ne servent qu'à démontrer l'effet. La décoloration entre les fonds noirs est difficile. Je vous suggère de donner au ul un fond noir et de fondre le texte/contenu au-dessus de celui-ci dans et hors; ça donnera un meilleur effet.

Ceci est le code du Fiddle. Si vous avez besoin d'une explication, s'il vous plaît demander.

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

Les images sont sous licence bla bla qui prend soin, mettre sur le procès pour me voler votre plage ;-)