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