jquery - 对文本的淡入效果

Question

我有这个div：

<div id="maintext">
        <div>
        <span>This is Photoshop's</span>
        <span>version  of Lorem</span>
        <span>Ipsum. Proin gravida</span>
        <span>nibh vel velit</span>
        <span>auctor aliquet. Aenean</span>
        <span>Psollicitudin, lorem quis</span>
        <span>bibendum auctor.</span>       
        </div>
    </div>

我想要，这个跨度得到淡入淡出效果。我怎样才能做到这一点？

Answer 1

如果您需要一起显示所有元素，您可以简单地隐藏并应用fadeIn()到#maintext > div元素而不是为每个span元素应用淡入淡出

否则，如果您需要顺序淡入，请查看此演示：http: //jsfiddle.net/FUZwL/

$('#maintext span').hide().each(function(i) {
    $(this).delay(i * 200).fadeIn(200);
});

Answer 2

$(function(){
   $('#maintext span').hide().fadeIn('slow');
});

或者你可以设置你spans使用display:none;css 然后fadeIn使用 jQuery。

#maintext span{
 display:none;
}

Answer 3

如果您<span>不可见，则可以使用 jQuery ：

$("#maintext > div > span").fadeIn();

Answer 4

淡入所有跨度以便使用回调：

function fadein(obj){
 obj.fadeIn('normal', function(){ 
  var next = (obj).next(); if (next.length>0) fadein(next); 
 });
}
$("#maintext span:first");