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