как отображать скрытые div один за другим, постепенно исчезая

Question

у меня есть этот HTML-код

<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>

и этот css

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

и это 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(){

}

думаю, теперь вы знаете, что мне нужно, я действительно не понимаю, как анимировать их один за другим каждые 6 секунд, я знаю, как сделать это с изображениями, но это совсем не работает с текстом

Answer 1

Я знаю, что уже есть три ответа, но я подумал, что я должен опубликовать свое решение тоже.Я думаю, что цикл не нужен:

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

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

Это в значительной степени говорит само за себя:

• первая строка в основном скрывает div при загрузке ( всегда отображать содержимое по причинам доступности)
• найти первый скрытый .post
• исчезнуть в течение одной секунды
• повторить

Вышебудет идти в $(document).ready(...); как обычно.

Я также сделал jsfiddle со следующим: http://jsfiddle.net/ninty9notout/nzPrV/

И вы можете увидеть это в действии на этом: http://mark.james.name/

удачи

Answer 2

Попробуйте это.

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

Демо

Answer 3

Вы можете использовать функцию delay для задержки анимации в очереди.

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

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

Демо

Answer 4

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

Хорошей идеей будет передать функции setInterval имя функции или анонимную функцию, которая запускает другие функции внутри нее, если вы передаете ей строку с именем функции, тогда необходимо использовать eval (что в этом case является злом, так как вам не нужно это делать).

Answer 5

/*

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