Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Поочередное применение эффектов (https://javascript.ru/forum/jquery/33982-poocherednoe-primenenie-ehffektov.html)

Alice 16.12.2012 23:11

Поочередное применение эффектов
 
Всем здравствуйте!

Имеется три блока, как осуществить поочередную анимацию, т.е. сначала появляется первый блок, как только его анимация закончилась, второй, третий и т.д. ?
Предполагаю, что должен быть какой-то цикл, но он работает не так, как мне бы хотелось, т.е. выводит все три блока одновременно.

Буду благодарна любому совету, может подскажите где и что почитать :thanks:

<script>
$(document).ready(function(){
$("div").each(function(){
$(this).effect("slide",{
            mode: "show",
            direction: "right"
    }, 500)
})
})
</script>

<div id="div1">Текст 1</div>
<div id="div2">Текст 2</div>
<div id="div3">Текст 3</div>

Sanda 16.12.2012 23:32

Используете jQueryUI?
jQueryUI Effect
Обратите внимание на четвёртый параметр (complete) - это функция, которая выполняется после завершения анимации.

Alice 16.12.2012 23:47

Да.
Да, я пыталась колдовать с вызовом обратной функции, но что-то должного результата опять же, не принесло.
Целый день сижу с этой проблемой, много чего было перепробовано и setTimeOut(), .queue() и пр., но что-то мозг подводит, сообразить не могу. :-?

Sanda 16.12.2012 23:59

Не тестировал, поэтому может не работать, но что-то типа такого:
function sequentialEffects(elems, index) {
  index = index || 0;
  if (!elems[index]) return;
  elems.eq(index).effect(
    'slide'
    , {
      mode: 'show'
      , direction: 'right'
    }
    , 500
    , function () {
      sequentialEffects(elems, index + 1);
    }
  );
}

sequentialEffects($('div'));

Deff 17.12.2012 00:01

Цитата:

Сообщение от Alice
Поочередное применение эффектов

Вызов следующего эффекта по завершении первого в функции сallback
$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", 
*!*
function(){alert("Вместо alert, вызов следующего эффекта");
*/!*
} );

Alice 17.12.2012 00:52

Sanda,
Спасибо большое, работает все прекрасно. :thanks:
Deff,
Вам также спасибо, что ответили :thanks:

nerv_ 17.12.2012 14:18

http://api.jquery.com/jQuery.queue/
http://jquery.page2page.ru/index.php...%D0%B8%D0% B9


Часовой пояс GMT +3, время: 02:17.