Fade Div1 In/Out puis Fade Div2 In?

Question

J'essaye de fondre dans le div "frame1" dans alors que "frame2" est caché, et puis quand "frame1" disparaît, je veux que "frame2" apparaisse là où "frame1" s'est évanoui. J'ai essayé de chercher, mais je n'ai pas eu de chance car la plupart des choses que j'ai rencontrées sont des événements surclic.

<div id="frames"> 
    <div id="frame1"> 
     <p>first text to appear here</p> 
    </div> 
    <div id="frame2"> 
     <p>second text to appear here after first text fades out</p> 
    </div> 
</div> 

Answer 1

Si frame1 est affiché et frame2 est caché, vous pouvez fadeOut frame1 puis FADEIN frame2 en utilisant ce code:

$(document).ready(function(){ 
    $("#frame1").fadeOut('slow', function(){ 
    $("#frame2").fadeIn('slow'); 
    }); 
}); 

Answer 2

position absolue les deux divs par rapport à la div wrapper ils sont superposés puis utilisez la fonction de rappel de l'événement fadeOut dans la première div.

$('#frame1').fadeOut('fast', function(){ 
    $('#frame2').fadeIn('fast'); // Callback 
}); 

Answer 3

Dans un premier temps, cadre 2 est caché, puis cadre cachant 1 et montrant l'image 2 avec cette fade out fade in ..

$("#frame1").fadeOut('slow', function(){ 
$("#frame2").fadeIn('slow'); 
}); 

Answer 4

utilisant jQuery .fadeTo()

$('#frame1').fadeTo('slow', 1, function() { 
    $('#frame2').fadeTo(600, 0); 
}); 

• duration: les exemples ci-dessus sont slow et 600 (chaîne ou nombre en millisecondes)
• : opacité des exemples ci-dessus comme 10 et (nombre allant de 0-1)

ou

utilisant jQuery .fadeIn() et .fadeOut()

$("#frame1").fadeOut('fast', function(){ 
    $("#frame2").fadeIn(100); 
}); 

• durée: exemples ci-dessus comme fast et 100 (chaîne ou nombre en millisecondes)

Answer 5

$('#frame1').fadeOut('slow'); 
$('#frame2').delay('slow').fadeIn('slow');