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(...);。

我还使用上面的内容：http://jsfiddle.net/ninty9notout/nzPrV/

你可以看到这一点：http://mark.james.name/

祝你好运

Answer 2

您可以使用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);
});

Demo

Answer 3

试试这个。

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

Answer 4

/*

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

Answer 5

$(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 （在这种情况下，是邪恶，因为你不必这样做）。

如何逐个淡入淡出显示隐藏的div

5 个答案: