CODEWITHSUNDEEP
jqueryhtmlcss
spentak
spentak

Reputation: 4727

HTML CSS JQuery Fading/Appearing content

I simply want to have a certain portion on the page that swaps content in and out (lets say 3 different items), with a fade effect. So I suppose I could define my container attributes for the content section, and then I could define each of the 3 div containers that will be swapping in and out. So with that in mind, what code do I write to hide two containers and only ever show one at a time (with the fade effect). This cycle would repeat forever.

Upvotes: 0

Views: 210

Answers (3)

Joseph Marikle
Joseph Marikle

Reputation: 78520

If you want it to cycle forever, you can use a little dom manipulation to do the trick.

http://jsfiddle.net/S4UYA/

<div id="container">
    <div class="content">content 1</div>
    <div class="content">content 2</div>
    <div class="content">content 3</div>
</div>



$("#container .content").not(":first").hide();

(function fadeItems(){
    $("#container .content:first").delay(1000).fadeTo(1000,0,function(){
        $(this).insertAfter("#container .content:last");
        $("#container .content:first").fadeTo(1000,1,function(){
            fadeItems();
        });
    });
})();

Upvotes: 0

memetech
memetech

Reputation: 1049

Let's say you are using JQuery with the following html:

<div class="container"><div name="1" /><div name="2" /><div name="somethingelse" /></div>

Then this would do the trick to fade everything out except the div named 2, which would fade in:

$("div.container > div").not('[name="2"]').fadeOut();
$('div.container > div[name="2"]').fadeIn();

You could easily make that a function that takes a parameter identifying the div to fade in, all others would fade out.

Upvotes: 0

whostolemyhat
whostolemyhat

Reputation: 3123

Try looking into the jQuery Cycle plugin - this seems to cover most of what you're asking for.

Upvotes: 1

Related Questions