Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.07.2011, 00:57
Интересующийся
Отправить личное сообщение для Dr.Livsi Посмотреть профиль Найти все сообщения от Dr.Livsi
 
Регистрация: 26.07.2011
Сообщений: 11

поочередное открытие картинок
Всем доброго времени суток!
На странице имеется около 10 картинок. все спрятаны методом $('img').hide(). Мне нужно сделать так, что бы каждая из спрятанных картинок одна за одной, по очереди открылись (fadeIn). Может ли кто помочь с этой задачей?
Ответить с цитированием
  #2 (permalink)  
Старый 27.07.2011, 20:06
Интересующийся
Отправить личное сообщение для belilo2001 Посмотреть профиль Найти все сообщения от belilo2001
 
Регистрация: 15.07.2011
Сообщений: 12

Посмотрите тему "Как заблокировать автоскроллинг" от 27.7.2011
Возможно, скрипт вам подойдет.
Ответить с цитированием
  #3 (permalink)  
Старый 28.07.2011, 16:33
Интересующийся
Отправить личное сообщение для Zimb Посмотреть профиль Найти все сообщения от Zimb
 
Регистрация: 28.07.2011
Сообщений: 12

<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, 28.07.2011 в 16:36.
Ответить с цитированием
  #4 (permalink)  
Старый 30.07.2011, 16:26
Интересующийся
Отправить личное сообщение для belilo2001 Посмотреть профиль Найти все сообщения от belilo2001
 
Регистрация: 15.07.2011
Сообщений: 12

Уважаемый Zimb!
Ваш скрипт работает, но изображение на странице дергается вверх-вниз в моменты срабатывания .hide() и fadeIn().
Аналогичная проблема в теме "Как заблокировать автоскроллинг".
Помогите решить!
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2011, 15:45
Интересующийся
Отправить личное сообщение для Dr.Livsi Посмотреть профиль Найти все сообщения от Dr.Livsi
 
Регистрация: 26.07.2011
Сообщений: 11

не, не запускается ((
Наверное, что-то не то делаю.
Вот мой вариант, но он тоже не работает:
<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>
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2011, 16:55
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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);
        
    })();      
});

Последний раз редактировалось melky, 31.07.2011 в 17:30.
Ответить с цитированием
  #7 (permalink)  
Старый 31.07.2011, 17:46
Интересующийся
Отправить личное сообщение для Dr.Livsi Посмотреть профиль Найти все сообщения от Dr.Livsi
 
Регистрация: 26.07.2011
Сообщений: 11

Сообщение от melky Посмотреть сообщение
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);
        
    })();      
});
Нет, не работает.
Ответить с цитированием
  #8 (permalink)  
Старый 31.07.2011, 17:57
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

там демо по ссылке. работает.
Ответить с цитированием
  #9 (permalink)  
Старый 31.07.2011, 18:05
Интересующийся
Отправить личное сообщение для Dr.Livsi Посмотреть профиль Найти все сообщения от Dr.Livsi
 
Регистрация: 26.07.2011
Сообщений: 11

попробовал вот так:
$(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)
			});

Не работает ((
Ответить с цитированием
  #10 (permalink)  
Старый 31.07.2011, 18:10
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

http://jsfiddle.net/phaYP/4/

и только скажи мне , что это не работает

>_<
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Java скрипт прокрутки картинок GEN_18 Javascript под браузер 10 28.10.2015 10:54
slideToggle (поочередное открытие ссылок со скрытым текстом) Luna82 Элементы интерфейса 6 05.06.2011 10:50
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 21:07
Java ScrollTo. Скрол картинок на java. Надо подправить. vdm Ваши сайты и скрипты 1 28.10.2009 19:46
Java ScrollTo. Скрол картинок на java. Надо подправить. vdm Работа 0 27.10.2009 13:57