CODEWITHSUNDEEP
jquerycsshtml
Joe Bobby
Joe Bobby

Reputation: 2811

Fade Div1 In/Out Then Fade Div2 In?

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>

Upvotes: 0

Views: 235

Answers (5)

Tarun
Tarun

Reputation: 1898

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

Upvotes: 0

Winter
Winter

Reputation: 368

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)

Upvotes: 0

Ganesh Kumar G
Ganesh Kumar G

Reputation: 185

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

Upvotes: 0

elclanrs
elclanrs

Reputation: 94101

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

Upvotes: 0

Aleksandar Vucetic
Aleksandar Vucetic

Reputation: 14953

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

Upvotes: 1

Related Questions