JQuery анимировать с эффектом "отскок" после завершения анимации?

Я искал ответ здесь, в Google и т. д. и не похоже, сделаю это.

у меня есть изображение с идентификатором #pin01. Это булавка на карте, которую я анимирую в div, приземляясь на изображение карты (подумайте о карте Google).

мой JQuery, который работает просто отлично, это:

$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);

и мой HTML выглядит следующим образом:

<img src="images/pin_blue.png" id="pin01" />

анимация отлично работает, и штырь исчезает, и падает на карту только штраф. Что я хотел бы, это отскок после того, как он был расположен 305px от верхней части div, поэтому, когда он на карте, он даст немного отскока в конце. Я думал, что использую этот эффект:

$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);

Я подумал, что окончательный код будет выглядеть примерно так:

$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);

это приводит к отскоку, но он возвращается в исходное исходное положение для Штыря, не сохраняя движение 305px. Я попробовал поместить верх: на эффект, который не сработал.

Я попытался объединить, вложить их и т. д. кажется, ничего не работает.

если у кого есть другие мысли, любопытно посмотреть, как сделать это правильно. Я думаю, что это простая настройка, просто не могу понять.

решение

удалено:

$('#pin01').animate({ opacity: 0}, 0).delay(1000);
$('#pin01').animate({ opacity: 1, top: "350px" }, 500);

заменил оба на одну строку из приведенного ниже ответа:

$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});

решена проблема отскок один раз на карте.

чтобы добавить некоторые функции fade, я написал следующее:

$('#pin01').animate({ opacity: '0' });
$('#pin01').delay(500).show().animate({ top: 305, opacity: '1' }, {duration: 1000, easing: 'easeOutBounce'});

может быть более чистый способ сделать выцветание, но это сработало для моего примера.

2 ответов


попробовать с:

$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});

можно использовать marginTop вместо top в вашей функции animate.