0

i have this html code

<div class="container" id="container">
<div class="post"><h1>first title</h1>description here</div>
<div class="post"><h1>second title</h1>description here</div>
<div class="post"><h1>third title</h1>description here</div>
</div>

and this css

.container {
height: 200px;
width: 300px;
border: 1px solid #666;
position: relative;
}
.post {
padding: 5px;
height: 190px;
width: 290px;
position: absolute;
z-index: 0;
}

and this js

// JavaScript Document
$(document).ready(function() {
        $(".post").css("display","none");
        $(".post:first").fadeIn(1000).css("display","block");


setInterval("displayPosts()",6000);

//document ready end
});


function displayPosts(){

}

guess now you know what i need i really don't understand how to animate them one by one every 6 seconds i know how to do that with images but it's not working with text at all

5 Answers 5

3

I know there are already three answers but I thought I should post my solution too. I think a loop is not necessary:

$(".post").hide();

(f=function(){
    $(".post:hidden:first").fadeIn(1000, f);
})();

This is pretty much self explanatory:

  • the first line basically hides the div on load (always display the content for accessibility reasons)
  • find the first hidden .post
  • fade it in over one second
  • repeat

The above would go in $(document).ready(...); as usual.

I also made a jsfiddle with the above: http://jsfiddle.net/ninty9notout/nzPrV/

And you can see this in action on this: http://mark.james.name/

Good luck

1
  • thanks a lot may be that's not what i was looking or but i really needed this code so bad thanks Jan 23, 2012 at 21:59
2

Try this.

$(document).ready(function() {
   $(".post").css("display","none").first().fadeIn(1000);
   setInterval(displayPosts, 6000);
});


function displayPosts(){
   $(".post:visible").fadeOut(1000, function(){
        $(".post").eq(($(this).index() + 1)%3).fadeIn(1000);
   })
}

Demo

0
2

You can use the delay function to delay an animation in the queue.

$(".post").each(function(i) {
    $(this).delay(i * 6000).fadeIn(6000);
});

// And to fade out
$(".post").each(function(i) {
    $(this).delay(i * 6000).fadeOut(6000);
});

Demo

0
1
/*

¤ How to Use ¤
    Javascript:
    $(".boxes").loadsequence();

    HTML:
    <div class=".boxes">A</div>
    <div class=".boxes">B</div>
    <div class=".boxes">C</div>


¤ Options ¤  
    delay: [200]          //Change loading speed

*/


(function ($) {
    $.fn.loadsequence = function (options) {

        //Define Parameters
        var defaults = {
            delay: 300
        };

        //Merge Default with Passed options
        var options = $.extend(defaults, options);

        //Caching $(this) for speed
        var obj = $(this).hide();

        //Start at item 0
        var i = 0;
        LoadSequence();

        //recursive for all the items.
        function LoadSequence() {
            obj.eq(i++).fadeIn(options.delay, LoadSequence);
        };

    };
})(jQuery);
0
1
$(function() {

    //setup function to run animations
    function displayPosts(){
        if (current < $posts.length) {
            $posts.eq(current).fadeIn(1000);
            current++;
        } else {

            //if all the elements have been animated we can cancel the interval by calling `clearInterval` on our timer variable (which holds a reference to the `setInterval` we called earlier
            clearInterval(timer);
        }
    }

    //cache the `.post` elements and set their `display` CSS property to `none`, also set a counter for the current animation
    var $posts  = $('.post').css("display","none"),
        current = 0;

    //set an interval to run the animations every six seconds
    var timer = setInterval(displayPosts, 6000);//run on interval

    //run animation function on `document.ready`
    displayPosts();
//document ready end
});

It's a good idea to pass the setInterval function a function name or an anonymous function that runs other functions inside it, if you pass it a string of a function name then eval has to be used (which in this case is evil since you don't have to do it).

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.