FadeIn эффект на тексте

Question

Я получил эту диву:

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

И я хочу, это охватывает получить FadeIn эффекта. Как я могу это сделать?

Answer 1

, если вам нужно, чтобы показать все элементы вместе, вы могли бы Simpy скрыть и применить элемент в fadeIn() к #maintext > div вместо применения FadeIn для каждого отдельного элемента 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'); 
}); 

Или вы можете установить ваш spans в display:none; с помощью CSS, а затем fadeIn с помощью JQuery.

#maintext span{ 
display:none; 
} 

Answer 3

Если <span> не видны, и вы можете использовать JQuery:

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

Answer 4

в FadeIn все пядь в использовании порядка обратных вызовов:

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