Jquery Анимация, помощь - PullRequest
       15

Jquery Анимация, помощь

1 голос
/ 11 июля 2010

Я пытаюсь создать волновой эффект с помощью Jquery.Имея элемент «подпрыгивать» один за другим.У меня это работает, но я не уверен, почему это работает только так.Во-первых, вот код.

//First Part (I Don't know why I need it?)
$(elements).queue(function(){
   $(this).fadeTo("fast",1);
   $(this).dequeue();});

//The Actuall Ripple Effect             
for (var i = 0; i < elements.length; i++)                       
    $(elements[i]).effect("bounce",{times:1}).delay(i * 50);
                }

Если бы я удалил первую часть, все элементы отскочили бы одновременно.Итак, мой вопрос: почему это происходит, и есть ли способ обойти это?

Я использую Jquery 1.4.2, а "элементы" - это изображения внутри встроенного неупорядоченного списка

// edit Я забыл сказать, что эффект отказов происходит из пользовательского интерфейса Jquery.

Ответы [ 2 ]

0 голосов
/ 11 июля 2010

У вас просто есть .delay() на неправильной стороне эффекта.

Попробуйте: http://jsfiddle.net/MF3A8/ (нажмите кнопку Run вверхудля воспроизведения)

elements = $('div');

for (var i = 0; i < elements.length; i++) {                   
    elements.eq(i).delay(50 * i).effect("bounce",{times:1});
}​

И вы можете использовать .eq() для ссылки на соответствующий элемент в объекте jQuery.

0 голосов
/ 11 июля 2010

Попробуйте:

jQueryElement.animate({bogusAttribute: false}, 400).animateMethod();

Где 400 - продолжительность задержки в миллисекундах. атрибут bogusAttribute может быть любым, чего нет в спецификациях CSS, а значение атрибута также может быть любым, что объясняется просто занятостью элемента без реальной анимации.

element.delay() приостанавливает ставит в очередь эффекты - это «[устанавливает] таймер для задержки выполнения последующих элементов в очереди», поэтому element.firstAnimationMethod(/* arguments */).delay(400).secondAnimationMethod(/* arguments */) работы.

Это будет:

$(elements).each(function(index, elementToAnimate) {

    $(this).animate({bogus: false}, (index * 50)).effect("bounce", {times: 1});

});
...