CODEWITHSUNDEEP
jqueryparentfadeinfadeoutchildren
user1048676
user1048676

Reputation: 10066

jQuery fadeout child div and fade in the next child div

All, Say I have the following divs:

<div id="rotate_container">
    <div class="reviews" id="item1">This is item one</div>
    <div class="reviews" id="item2">This is item two</div>
    <div class="reviews" id="item3">This is item three</div>
</div>

Now what I'm trying to do is when the DOM is finished loading, I'm trying to fade out the text in the div with item1 an fade in the text in the div of item2 and then fade out item2 and fade in item3. After that's done, I'd like to go back and fade out item3 and fade back in item1 based on a setTimeout.

I was looking up .childen.next.fadein but couldn't find a good tutorial on how that worked.

Eventually I'd like to also add buttons that I can click which if your on item2 and you click previous, it would fade out item2 and then fade in item1 then after the setTimeout would go it would fade out item1 and then fade back in item2.

Basically, the idea I'm going for can be found here (right above the footer and the rotating comments): http://themes.winterbits.com/?theme=daydream

Any ideas on a good way to approach this would be greatly appreciate! Thanks in advance!

Upvotes: 2

Views: 1983

Answers (4)

zequinha-bsb
zequinha-bsb

Reputation: 719

function didleeslide(item) {
    $('#item'+item).slideDown(1000);
    item = (item > 2) ? 1 : ++item;
    $('#item'+item).slideUp(1000);
    item = (item > 2) ? 1 : ++item;
    $('#item'+item).slideDown(1000);
    setTimeout("didleeslide("+item+")",1000);
}

function didleefade(item) {
    $('#item'+item).fadeIn(1000);
    item = (item > 12) ? 11 : ++item;
    $('#item'+item).fadeOut(1000);
    item = (item > 12) ? 11 : ++item;
    $('#item'+item).fadeIn(1000);
    setTimeout("didleefade("+item+")",1000);
}

$(document).ready( function () {
    didleeslide(3);
    didleefade(13);
});

PS: Slide, for me, looks more elegant since there
    would have too much shuffling. On the other hand, fadein/fadeout 
    might be the original idea.

Take a look here:

http://zequinha-bsb.int-domains.com/fadein-fadeout.html

Upvotes: 0

adeneo
adeneo

Reputation: 318182

I was fiddling around with something else and forgot to post my answer, but anyway here is the example i made, if that is of some use to you: http://jsfiddle.net/3pTzh/4/

Upvotes: 0

Abe Miessler
Abe Miessler

Reputation: 85036

This should do it (updated to repeat):

(function fadeItems(elem){   

    elem.fadeIn('slow',function(){      
       $(this).fadeOut('slow', function(){   
           if($(this).next().length > 0){
             fadeItems($(this).next());   
           }
           else{
               setTimeout(fadeItems, 3000, $("div.reviews:first"));
           }
       });
    });
})( $("div.reviews:first") );

fiddle - http://jsfiddle.net/rwN7U/2/

Upvotes: 2

James Hay
James Hay

Reputation: 7315

Use callback functions on your jQuery animations

$('#item1').fadeout(200,function(){
    // This is the callback which 
    // runs after this animation completes.
    runAnotherAnimation();
});

Upvotes: 0

Related Questions