Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.06.2009, 23:40
Интересующийся
Отправить личное сообщение для Tohin Посмотреть профиль Найти все сообщения от Tohin
 
Регистрация: 30.06.2009
Сообщений: 23

Порядок выполнения анимации
Извиняюсь заранее, вопрос вероятно из области RTFM....Но что то я в ступор впал и ничего найти/понять не могу:
Итак есть n-разных элементов (допустим div'ы)
Я никак не могу решить 2 задачи:
1. как сделать чтобы анимация элемента n+1 начиналась только после окончания анимации элемента n? Можно конечно и так:
$('div.n').animate({"top": "+=350"},2500);
$('div.n+1').pause(2500).animate({"bottom": "+=110"},1500);


Но как то коряво на мой ламерский взгляд.....

2. При обработке событий, ну допустим:
$('div.n').hover(
		function() {
			$(this).find('div:first').slideDown('slow');
		},
		function() {
			$(this).find('div:first').slideUp('fast');
		});

можно насоздавать событий пока идет анимация (мышка, она ведь быстрая) и потом дочерний элемент пляшет сам по себе, пока не отработает все события.
Как запретить на время анимации постановку в очередь?
Ответить с цитированием
  #2 (permalink)  
Старый 01.07.2009, 00:44
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

$('div.n').animate({"top": "+=350"},2500).animate({"bottom": "+=110"},1500);

Сообщение от Tohin
Как запретить на время анимации постановку в очередь?
Лучше не запрещать постановку в очередь, а прерывать предыдущую анимацию.

Последний раз редактировалось Riim, 01.07.2009 в 00:46.
Ответить с цитированием
  #3 (permalink)  
Старый 01.07.2009, 09:19
Интересующийся
Отправить личное сообщение для Tohin Посмотреть профиль Найти все сообщения от Tohin
 
Регистрация: 30.06.2009
Сообщений: 23

Сообщение от Riim Посмотреть сообщение
$('div.n').animate({"top": "+=350"},2500).animate({"bottom": "+=110"},1500);
Не... не то... див не один... дива два (div.n и div.n+1), и нужно запихнуть их анимацию в одну и ту же очередь.

Я тормоз! ответ в теме на первой странице Порядок выполнения команд
По идее должно быть так:
$('div.n').fadeIn(1500).fadeOut(1500,function() {
		$('div.n+1').fadeIn(1500); 
	});

ну или то же самое с animate

Сообщение от Riim Посмотреть сообщение
Лучше не запрещать постановку в очередь, а прерывать предыдущую анимацию.
Тоже не катит... желательно, чтобы анимация предыдущего объекта была полностью завершена, и только после этого принималась постановка в очередь новых анимаций.

Как и думал я не первый стакиваюсь с этим траблом
На этом форуме нашел код:
var hideDelayTimer = null;
    var flag = 0;
    $("#blablabla").bind("mouseenter",function() {
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        if (flag == 0) {
            flag = 1;
            $(this).animate({"width": "+=120px"}, "slow");
        } else {
            return;
        };
    }).bind("mouseleave",function(){
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        hideDelayTimer = setTimeout(function() {
        hideDelayTimer = null; 
        if (flag == 1) { 
            $("#blablabla").animate({"width": "-=120px"}, "slow", function() {
                flag = 0;
             });
        } else {
            return;
        };
        }, 500);
    });


Как я понял, перед выполнением анимации задается переменная flag, а после ее окончания она обнуляется. Перед началом анимации проверяется состояние переменной и в сучае выпонения иной анимации новая не выполняется.
Не понял назначение переменной hideDelayTimer и проводимых с ней операций. Подскажите?

Последний раз редактировалось Tohin, 02.07.2009 в 00:05.
Ответить с цитированием
  #4 (permalink)  
Старый 03.07.2009, 11:52
Интересующийся
Отправить личное сообщение для Tohin Посмотреть профиль Найти все сообщения от Tohin
 
Регистрация: 30.06.2009
Сообщений: 23

Спасибо всем откликнувшимся разобрался сам.
Опишу для будущих поколений, если ошибся надеюсь меня поправят:

При скрытии функция setTimeout(function() задает паузу перед выполнением анимации в 500мс. и если в этот период снова происходит вызов по событию, то анимация отменяется строчкой:
if (hideDelayTimer) clearTimeout(hideDelayTimer);
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Порядок выполнения команд shooretz jQuery 2 23.06.2009 18:13
IE: неизвестная ошибка выполнения Лесной_Белк Internet Explorer 6 18.06.2009 10:41
Порядок выполнения скриптов на странице kefi Общие вопросы Javascript 17 10.04.2009 13:30
Синхронность выполнения анимации и append kotmatroskin jQuery 10 26.01.2009 11:03
разное время выполнения операции ropowek Events/DOM/Window 2 08.10.2008 13:27