web-dev-qa-db-ja.com

アニメーションが完了した後、JQuery Animate with Effect 'Bounce'？

私はここやグーグルなどで答えを探し回っていましたが、これを完全に釘付けにすることはできないようです。

IDが＃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" />

アニメーションはうまく機能し、ピンはフェードインし、マップにうまくドロップします。私が欲しいのは、divの上から305pxに配置された後のバウンスです。そのため、マップ上にある場合、最後に少しバウンドします。私はこの効果を使用すると思いました：

$('#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の動きは保持されません。トップを配置してみましたが、効果がありませんでした。

これらを組み合わせたり、入れ子にしたりしてみましたが、何も機能していないようです。

誰か他の考えがある場合は、これを適切に機能させる方法を知りたいと思っています。シンプルなTweakだと思いますが、理解できないようです。

[〜＃〜]ソリューション[〜＃〜]

削除：

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

以下の回答から両方を1行に置き換えます：

$('#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'});

フェードを行うためのよりクリーンな方法があるかもしれませんが、これは私の例ではうまくいきました。

jqueryjquery-animatebounce
12
stebesplace

試してみてください：

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

アニメーション関数でmarginTopの代わりにtopを使用できます。

0
r0m4n