Анимация JQuery с эффектом & #39;Отскок& #39; после завершения анимации?

Я искал ответ здесь, в 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" />

Анимация работает отлично, булавка исчезает и прекрасно падает на карту. Что бы я хотел, так это отскок после того, как он будет расположен на 305 пикселей от верхней части 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);

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

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

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

РЕШЕНИЕ

Удалено:

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

Заменены обе строки одной строкой из приведенного ниже ответа:

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

Решена проблема однократного отскока на карте.

Чтобы добавить некоторые функции затухания, я написал это следующим образом.:

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

Возможно, есть более чистый способ сделать затухание, но это сработало для моего примера.

12
задан stebesplace 20 April 2012 в 19:11
поделиться