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