поочередное открытие картинок
Всем доброго времени суток!
На странице имеется около 10 картинок. все спрятаны методом $('img').hide(). Мне нужно сделать так, что бы каждая из спрятанных картинок одна за одной, по очереди открылись (fadeIn). Может ли кто помочь с этой задачей? |
Посмотрите тему "Как заблокировать автоскроллинг" от 27.7.2011
Возможно, скрипт вам подойдет. |
<script>
//Скритие всех картинок
$("img").hide();
//Создание интервала для очередного отображения картинок
setInterval(function(){
var visEl = $("img:visible"); //Находи видимую картинку
var nextEl = visEl.next(); //Следующая после видимой
$("img").hide(); //Скрытие опять всего
if(visEl.length==0||nextEl.length==0) //Если нет видимого элемента или нет следующего тогда отображаем первую картинку в другом случае открываем следующую по порядку
$("img:first").fadeIn();
else nextEl.fadeIn();
}, 1000)
</script>
|
Уважаемый Zimb!
Ваш скрипт работает, но изображение на странице дергается вверх-вниз в моменты срабатывания .hide() и fadeIn(). Аналогичная проблема в теме "Как заблокировать автоскроллинг". Помогите решить! |
не, не запускается :(((
Наверное, что-то не то делаю. Вот мой вариант, но он тоже не работает: <script type="text/javascript"> $(function() //при загрузке страницы сначала все прячем { $('#photo').hide() $('.preview').hide() } ); window.onload=function() //после загрузки страницы - открываем поочередно { $('#photo').fadeIn('slow'); open2() }; function open2() { $.each($('.preview:hidden'), function(){ setTimeout(myopen(this), 100) }) } function myopen(obj) {$(obj).fadeIn(500)}; </script> |
http://jsfiddle.net/phaYP/3/
$(function(){
$('#photo').fadeIn('slow');
var els = $('.preview:hidden'), i=0;
(function cycle(){
i in els && els.eq(i++).fadeIn("500", cycle);
})();
});
|
Цитата:
|
там демо по ссылке. работает.
|
попробовал вот так:
$(function()
{
$('#photo').hide()
$('.preview').hide()
window.onload=function()
{
$('#photo').fadeIn('slow');
$('.preview:hidden:first').fadeIn('slow');
$('.preview:hidden').each(function()
{
$(this).fadeIn('slow');
});
}
$('a').click(function()
{
$('#photo').fadeOut(400)
$('.preview').fadeOut(400)
});
}
);
Нормально - плавное октрытие всех сразу preview работает. Попробовал добавить setTimeout():
$('.preview:hidden').each(function()
{setTimeout(function(this)
{
$(this).fadeIn('slow');
},100)
});
Не работает :((( |
|
| Часовой пояс GMT +3, время: 21:58. |