Реализовать постепенную анимацию

[dmitry111]

Есть картинки, которые представлены в виде списка (<li>)
По умолчанию opacity 0 (прозрачные)

Хочу чтобы они после загрузки страницы страницы возвращались из прозрачность.

Реализую это с помощью jquery animate

Хочу сделать чтобы они возвращались из анимации не все сразу, а постепенно. То есть сначала одна, через секунду вторая, третья и т.д.

Полагаю для этого мне понадобится setTimeout.

Правилен ли ход моих мыслей или можно сделать проще?
Как лучше это все реализовать? Задать классы картинкам и обращаться к каждому из них по отдельности?? Или как-нибудь сделать с помощью цикла for?

[dmitriymar]

для начала ,прочитать как работает jquery animate когда их несколько и всё сведётся к 20-25 символам

[dmitry111]

имеете в виду callback?

то есть присвоить каждому <li> свой класс, и по очереди выполнять функцию animate?


А нельзя ли (я где-то читал, но забыл где..) поочередно обращаться к рядом лежащему <li> ?

[dmitriymar]

1 получить необходимые объекты через селектор
2 навесить на них всех анимате(они будут выполняться последовательно как только отработает один -начнёт работать другой)

если между ними нужна пауза -есть несколько способов.
от ... и до изменять прозрачность до несуществующих пределов -вот и пауза появиться

А нельзя ли (я где-то читал, но забыл где..) поочередно обращаться к рядом лежащему <li> ?

а зачем?

то есть присвоить каждому <li> свой класс,

а зачем,если можно сразу правильно написать селектор?

[melky]

В квери можно устанавливать задержку перед след. эффектом. Таким образом, код упрощается.

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<ul>
  <li><img src="http://cs9775.userapi.com/g34580657/e_0b7a4d23.jpg"></li>
  <li><img src="http://cs941.userapi.com/g1074652/e_1b5f8f2e.jpg"></li>
</ul>

<script>
$('img').each(function(i){
  // i - индекс текущего элемента в коллекции
  $(this).css({opacity:1, display:'none'}).delay(i*1000+600).fadeIn(600);
  // задержка для первой ---> 1000*0+600 => 600
  // для второй ---->  1000*1+600 => 1600
  // т.е. между появлениями разница в 1 сек.
});
</script>

[dmitry111]

1 получить необходимые объекты через селектор
2 навесить на них всех анимате(они будут выполняться последовательно как только отработает один -начнёт работать другой)

если между ними нужна пауза -есть несколько способов.
от ... и до изменять прозрачность до несуществующих пределов -вот и пауза появиться


а зачем?

а зачем,если можно сразу правильно написать селектор?

Не знаю это ли вы имели в виду. Получилось реализовать вот так:

<script type="text/javascript">

$(document).ready(function(){

$("#category_img li:first").animate ({  //первый элемент li
opacity:1
}, 1000 );

$("#category_img li:first + li").animate({ //второй
opacity:1
}, 2000 );

$("#category_img li:first + li + li").animate({ //третий
opacity:1
}, 3000 );


});

</script>

Все работает, но сам код слишком громоздкий.

[dmitry111]

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<ul>
  <li><img src="http://cs9775.userapi.com/g34580657/e_0b7a4d23.jpg"></li>
  <li><img src="http://cs941.userapi.com/g1074652/e_1b5f8f2e.jpg"></li>
</ul>

<script>
$('img').each(function(i){
  // i - индекс текущего элемента в коллекции
  $(this).css({opacity:1, display:'none'}).delay(i*1000+600).fadeIn(600);
  // задержка для первой ---> 1000*0+600 => 600
  // для второй ---->  1000*1+600 => 1600
  // т.е. между появлениями разница в 1 сек.
});
</script>

Да, этот лучше чем у меня! Спасибо!

[dmitry111]

Сейчас применил версию реализованную через each .

Обидно что из-за display:none, элементы появляются не из места где должны находится.


А можно как-нибудь ужать мой скрипт?

Вот этот который :

<script type="text/javascript">

$(document).ready(function(){

$("#category_img li:first").animate ({  //первый элемент li
opacity:1
}, 1000 );

$("#category_img li:first + li").animate({ //второй
opacity:1
}, 2000 );

$("#category_img li:first + li + li").animate({ //третий
opacity:1
}, 3000 );


});

</script>

[melky]

Сейчас применил версию реализованную через each .

Обидно что из-за display:none, элементы появляются не из места где должны находится.

виновата эта строчка, наверное. лень разбираться.

$(this).css({opacity:1, display:'none'}).delay(i*1000+600).fadeIn(600);

А можно как-нибудь ужать мой скрипт?
Вот этот который

$(function(){

     $("#category_img li").each(function(i){
          $(this).delay(1000*i).animate ({ 
               opacity:1
          }, 1000 );

     });
});

[dmitry111]

А ну вот, что и хотел..

Возник вопрос по тегу <noscript>, точнее по его реализации.

Можно ли в нем прописывает css правила и ставить его в <head>?


Дело в том, что с практической стороны этот код в хеде работает:

<head>
<noscript>
<style type="text/css">#category_img li{opacity:1;}</style>
</noscript>
<!--если отключен js, картинки вернут свойство opacity:1-->
</head>

Код при этом остается валидным.
Но информации по <noscript> в данном применении я не встречал.

Можно ли так писать?