Fade Div1 In/Out Then Fade Div2 In?

Question

I'm trying to fade in the div "frame1" in while "frame2" is hidden, and then when "frame1" fades out I want "frame2" to fade in where "frame1" faded out. I tried searching, but havent had luck since most that I have come across are onclick events.

<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

If frame1 is shown and frame2 is hidden, you can fadeout frame1 and then fadein frame2 by using this code:

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

Answer 2

Absolute position both divs relative to the wrapper div so they're superposed and then use the callback function from the fadeOut event in the first div.

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

Answer 3

At first, frame 2 is hidden, then hiding frame 1 and showing frame 2 with this fade out fade in..

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

Answer 4

using jQuery .fadeTo()

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

• duration: examples above as slow and 600 (string or number in milliseconds)
• opacity: examples above as 1 and 0 (number ranging from 0-1)

or

using jQuery .fadeIn() and .fadeOut()

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

• duration: examples above as fast and 100 (string or number in milliseconds)

Answer 5

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