Я охотился за ответом здесь, в 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);
Это приводит к отказу, но возвращается к исходной исходной позиции для булавки, не сохраняя движение 305 пикселей. Я попытался поставить верх: на эффект, который не работал.
Я попытался объединить, вложив их и т.д., ничего не работает.
Если у кого-то есть другие мысли, любопытно посмотреть, как заставить это функционировать должным образом. Я думаю, что это простая настройка, просто не получается понять это.
Решение
Удалено:
$('#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'});
Там может быть более чистый способ сделать затухание, но это сработало для моего примера.
