Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.10.2011, 15:37
Аспирант
Отправить личное сообщение для burashka Посмотреть профиль Найти все сообщения от burashka
 
Регистрация: 15.07.2010
Сообщений: 49

усмирить слайдшоу
есть простенькое слайдшоу, которое может само листатся, может пролистыватся кнопками. к каждому слайду сверху падает текст
var timeout;
var prevPhoto;
var numberOfPhotos;

$(document).ready(
	function()
	{
		$('#no-script').remove();
		$('#photos > div > p').hide();
		prevPhoto = 0;
		
		$('#Online').click(function()	{ clickButton(1); });
		$('#Uprav').click(function()	{ clickButton(2); });
		$('#Service').click(function()	{ clickButton(3); });
		
		numberOfPhotos = $('#photos img').length;
		rotatePics(1);
	});
	
function clickButton (numberButton)
{
	clearTimeout(timeout);
	rotatePics(numberButton);
}

function rotatePics(currentPhoto)
{
	//пытаюсь остановить все эффекты связанные с текстом
	$('#photos > div > p').stop(true, true).hide();
	currentPhoto = currentPhoto % numberOfPhotos;
	prevPhoto = currentPhoto-1;
	
	$('#photos img').eq(currentPhoto).fadeOut(
		function()
		{
			$('#photos img').each(
				function(i)
				{
					$(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos);
    			});
    		$(this).show();
    		
    		$('#photos > div > p').eq(currentPhoto-1).slideDown('slow');
			timeout = setTimeout(function() {rotatePics(++currentPhoto);}, 4000);
		});
}


фотки и текст в html оформлены так:
<div id="photos">
		<img alt="Image1" src="DSC_2023.JPG" />
		<div><p>Работайте<br>из дома<br>on-line!</p></div>
		<img alt="Image2" src="DSC_2024.JPG" />
		<div><p>Управляйте<br>всем!</p></div>
		<img alt="Image3" src="DSC_2025.JPG" />
		<div><p>Оказываем<br>услуги<br>населению!</p></div>
		
		<div id="menu">
			<div id="Online"><p>Текст1</p></div>
			<div id="Uprav"><p>Текст2</p></div>
			<div id="Service"><p>Текст3</p></div>
		</div>
	</div>


проблема
при быстром клацании по кнопкам, тексты начинают падать быстрее чем затираться, как следствие, двоится, троится и т.д.
понятно, что это происходит из-за параллельного запуска функции отрисовки. для этого поставил stop(true, true), но он не спасает. Такое ощущение, что на момент запуска второй функции эффект первой еще не начал выполнятся.
нет, все хуже. он полностью всю очередь анимации помнит...

заранее прошу прощения, если вопросы глупые, только начал JQuery изучать, раньше ExtJS в основном юзал

Последний раз редактировалось burashka, 07.10.2011 в 16:39.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Горизонтальный слайдшоу vah-smile Элементы интерфейса 6 12.11.2010 00:33
слайдшоу с назад и вперед ivanweb jQuery 3 08.07.2010 11:17
Слайдшоу на JQuery (IE, FF :-)), Opera :-( Artiomka jQuery 0 21.03.2010 08:11
Гуру ! помогите сделать начало слайдшоу c рандомной картинки Nekojiru Общие вопросы Javascript 0 22.07.2009 19:28
помогите сделать начало слайдшоу c рандомной картинки Nekojiru Ваши сайты и скрипты 0 20.07.2009 19:50