Реализовать постепенную анимацию
Есть картинки, которые представлены в виде списка (<li>)
По умолчанию opacity 0 (прозрачные) Хочу чтобы они после загрузки страницы страницы возвращались из прозрачность. Реализую это с помощью jquery animate Хочу сделать чтобы они возвращались из анимации не все сразу, а постепенно. То есть сначала одна, через секунду вторая, третья и т.д. Полагаю для этого мне понадобится setTimeout. Правилен ли ход моих мыслей или можно сделать проще? Как лучше это все реализовать? Задать классы картинкам и обращаться к каждому из них по отдельности?? Или как-нибудь сделать с помощью цикла for? |
для начала ,прочитать как работает jquery animate когда их несколько и всё сведётся к 20-25 символам
|
имеете в виду callback?
то есть присвоить каждому <li> свой класс, и по очереди выполнять функцию animate? А нельзя ли (я где-то читал, но забыл где..) поочередно обращаться к рядом лежащему <li> ? |
1 получить необходимые объекты через селектор
2 навесить на них всех анимате(они будут выполняться последовательно как только отработает один -начнёт работать другой) если между ними нужна пауза -есть несколько способов. от ... и до изменять прозрачность до несуществующих пределов -вот и пауза появиться Цитата:
Цитата:
|
В квери можно устанавливать задержку перед след. эффектом. Таким образом, код упрощается.
<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>
|
Цитата:
Не знаю это ли вы имели в виду. Получилось реализовать вот так:
<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>
Все работает, но сам код слишком громоздкий. :( |
Цитата:
Да, этот лучше чем у меня! Спасибо! |
Сейчас применил версию реализованную через 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>
|
Цитата:
$(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 );
});
});
|
А ну вот, что и хотел..
Возник вопрос по тегу <noscript>, точнее по его реализации. Можно ли в нем прописывает css правила и ставить его в <head>? Дело в том, что с практической стороны этот код в хеде работает:
<head>
<noscript>
<style type="text/css">#category_img li{opacity:1;}</style>
</noscript>
<!--если отключен js, картинки вернут свойство opacity:1-->
</head>
Код при этом остается валидным. Но информации по <noscript> в данном применении я не встречал. Можно ли так писать? |
| Часовой пояс GMT +3, время: 06:17. |