Реализовать постепенную анимацию
Есть картинки, которые представлены в виде списка (<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> в данном применении я не встречал. Можно ли так писать? |
оно не ниже, оно имеет больший приоритет.
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Цитата:
<style type="text/css">
#category_img li.dd{opacity:0;}
#category_img li{opacity:1;}
</style>
:) |
dmitry111, идите учить матчасть.
|
Цитата:
я поправил Maxmaxmахimusа, потому что его фраза: Цитата:
А что если я хочу сделать выше? Разве не могу? Поэтому правильно говорить "чтобы это css правило имело больший приоритет"! |
Если приоритет у правил одинаковый, то применяетчя последнее (нижнее)
Если же приоритет поменять ( это можно сделать череЗ !important, element.style, или через правильно сформированные селекторы), то к элементу применится правило, имеющее наивысшый приоритет. Марум, ты как всегда, Споришь, но мимо кассы :) |
Цитата:
лови плюху. список факторов влияющих на приоритет Css свойства в авторских стилях по мере их убывания: Использование Css свойства в атрибуте style вместе с Important Использование Important в Css свойстве из внешнего файла таблиц стилей или же из тега style в Html коде Использование Css свойства в атрибуте style Использование большего числа селекторов Id для данного Css свойства Использование большего числа селекторов классов, псевдоклассов и атрибутов для данного Css свойства Использование большего числа селекторов тегов и псевдоэлементов для данного Css свойства Более низкое расположение Css свойства в коде, при прочих равных условиях цитата отсюда, где всё с работоспособными примерами :) :) и кстати, ты сейчас послал на завод работать верстальщиков гугла, у которых стили напичканы !important'ами ;) |
Цитата:
|
Цитата:
|
я вижу, что ты писал :) ты упираешься лишь в одно: всё что ниже — приоритетнее.. а тебе говорят, что то, что выше можно сделать ещё более приоритетнее. и это на самом деле так.
а теперь включи мозги и осознай, что ты не прав или подай резюме в ЖЭК. ;) |
Цитата:
не.. из ЖЭК'а тебя тоже попрут.. как пить дать... перечитай всю ветку и может быть поймешь.. в противном случае я даже не знаю, как тебе что-нибудь объяснить.. |
ну вы ваще...
Цитата:
Если правило одинаково, то приоритет у того, которое ниже в коде. Цитата:
Если не ошибаюсь, !important был придуман для внешних css (браузерных). Он конечно будет работать и в таблице стиля сайта, но не вижу смысла для него. |
Цитата:
поэтому насчет ЖЭК'а беру свои слова обратно.. не подавай туда резюме.. а-то прикрутишь унитаз к потолку и скажешь: "я знаю, что унитаз можно поставить на пол, но ТАК УДОБНЕЕ".. |
Цитата:
дальше сам допиши :) |
Цитата:
|
Maxmaxmахimus,
Ты сказал неграмотно, я поправил. Не думал что это вызовет здесь такой ср@ч.. Как говорить в дальнейшем решать тебе. |
Цитата:
ответ был на это: Цитата:
|
в том, что ты упрямый как баран.. этого достаточно? :)
|
Добрый вечер!
Решил с помощью jQuery сделать менюшку для сайта, но т.к. всего второй раз имею дело с jQuery, скрипт получается громоздкий. $(document).ready(function(){ $("header h1").animate({opacity: 1}, 1000); }); $(document).ready(function() { $('#logo').delay(1000).animate({opacity: 1}, 1000, function() {}); }); $(document).ready(function(){ $("#logo").click(function(){ $("#logo").animate({marginLeft:"76%", marginTop:"-15%"},1000); $("header").animate({width:"75%", marginRight:"20%"},1000);});}); $(document).ready(function(){ $("#btn01").mouseover(function(){ $("#expo").stop().animate({opacity: 1, width:"250px", height:"250px", marginTop:'10%', marginLeft:'-20%'}, 1000); $("#btn01").mouseover(function(){ $("#btn01").stop().animate({opacity: 1, height:"250px"}, 1000);}); }); $("#btn01").mouseout(function(){ $("#expo").stop().animate({opacity: 0, width:"50px", height:"50px"}, 1000); $("#btn01").mouseout(function(){ $("#btn01").stop().animate({opacity: 1, height:"50px"}, 1000);}); }); $("#btn02").mouseover(function(){ $("#dres").stop().animate({opacity: 1, width:"250px", height:"250px"}, 1000);}); $("#btn02").mouseout(function(){ $("#dres").stop().animate({opacity: 0, width:"50px", height:"50px"}, 1000);});}); Т.е. при наведении на к.-л. кнопки в меню, появляется image +подменю. |
| Часовой пояс GMT +3, время: 18:42. |