如何显示隐藏的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

试试这个。

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

/* 

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

Demo

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匿名函数必须使用（在这种情况下，是邪恶，因为你不必这样做）。

Answer 5

我知道已经有三个答案，但我想我应该张贴我的解决办法了。我认为，一个循环是没有必要的：

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

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

这是相当多的自我解释：

• 第一线基本上隐藏在加载DIV（总是显示的可访问性的原因，内容）
• 找到第一个隐藏的.post
• 在一秒钟内褪色
• 重复

以上将像往常一样进入$(document).ready(...);。

我也做了与上述一的jsfiddle：http://jsfiddle.net/ninty9notout/nzPrV/

而且你可以看到这个动作在此：http://mark.james.name/

好运