2011-07-04 2 views

ответ

7

Дайте им общий класс и выполните fadeIn()[docs] в цикле, используя метод each()[docs], задерживая каждый из них методом delay()[docs] для заданной продолжительности, умноженной на индекс цикла.

$('li.someClass').hide().each(function(i) { 
    $(this).delay(i * 400).fadeIn(); 
}); 

Каждый элемент начнет 400 миллисекунд позже предыдущего.

Пример:http://jsfiddle.net/4ANCj/

+0

красивая, спасибо. есть ли способ просмотреть jsfiddles? Я новичок в этом – iamwhitebox

+0

@ WHITEB0X: Не уверен, что вы имеете в виду. Вы имеете в виду как центральный репозиторий скриптов? Я не знаю, что jsFiddle имеет какую-то публичную демонстрацию скриптов. Я уверен, что вам нужны прямые ссылки, которые опубликовали другие. Но кто знает? Зарегистрируйте учетную запись, и вы можете найти другие функции. – user113716

+0

Хорошее решение. Я никогда не доверял таймерам javascript, чтобы быть на 100% точным, хотя в неизвестных браузерах, процессорах и т. Д. Больше поклонников обратного вызова. Опоры, хотя я бы даже не подумал об этом методе. – AlienWebguy

3
function fade_in_recursive(e,duration,callback) 
{ 
    $(e).fadeIn(duration,function() 
    { 
     if($(e).next().length == 0) 
     { 
      if(typeof(callback) == 'function') 
      { 
       callback(); 
      } 
      return; 
     } 
     else 
     { 
      // Apply recursion for every sibling. 
      fade_in_recursive($(e).next(),duration,callback); 
     } 
    }); 

} // End fade_in_recursive 

$(function() 
{ 
    fade_in_recursive($('ul li:first-child'),500); 
}); 

http://jsfiddle.net/2s4L8/

Смежные вопросы