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元素应用fadeIn

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

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

Answer 2

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

或者您可以使用css将spans设置为display:none;，然后使用jQuery设置fadeIn。

#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");

FadeIn对文本的影响

4 个答案: