JQuery Animate with Effect 'Bounce' sau khi hoạt ảnh hoàn tất?

Question

Tôi đã tìm kiếm câu trả lời ở đây, Google, v.v., và dường như không thể làm nổi bật câu trả lời này.

Tôi có hình ảnh có ID là # pin01. Đây là một ghim trên bản đồ mà tôi có hoạt ảnh xuống trong div, đặt chân lên hình ảnh bản đồ (nghĩ bản đồ Google).

JQuery của tôi, mà làm việc chỉ là tuyệt vời, là thế này:

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

và HTML của tôi là như sau:

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

Các hoạt hình hoạt động tuyệt vời, và pin mất dần trong, và giọt trên vào bản đồ tốt. Những gì tôi muốn, là một thư bị trả lại sau khi nó đã được định vị 305px từ phía trên cùng của div, vì vậy khi nó trên bản đồ, nó sẽ cho một chút thư bị trả lại ở cuối. Tôi nghĩ rằng tôi muốn sử dụng hiệu ứng này:

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

Tôi nhận thấy mã cuối cùng sẽ đi một cái gì đó như thế này:

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

Điều đó dẫn tới một thư bị trả lại, nhưng nó trả lại vị trí xuất phát ban đầu cho pin, không giữ lại phong trào 305px. Tôi đã cố gắng đặt một đầu: về hiệu quả, mà không làm việc.

Tôi đã thử kết hợp, lồng ghép những thứ này, v.v., dường như không có gì hoạt động.

Nếu có ai có bất kỳ suy nghĩ nào khác, hãy tò mò muốn xem cách làm cho hoạt động này hoạt động bình thường. Tôi nghĩ đó là một tinh chỉnh đơn giản, dường như không thể hình dung ra được.

SOLUTION

Removed:

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

thay thế cả hai với một dòng duy nhất từ ​​câu trả lời dưới đây:

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

Giải quyết được vấn đề của thư bị trả lại một lần vào bản đô.

Để thêm vào một số chức năng tiêu tan, tôi đã viết nó như sau:

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

Có thể có một cách sạch hơn để làm mờ dần, nhưng điều này làm việc cho ví dụ của tôi.

Answer 1

Hãy thử với:

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

Answer 2

Bạn có thể sử dụng marginTop thay vì top chức năng Animate của bạn.