ここやGoogleなどで答えを探していましたが、これを完全に釘付けにすることはできません.
ID が #pin01 の画像があります。これは、マップの画像 (Google マップを考えてください) に着陸する、div 内で下にアニメーション化したマップ上のピンです。
うまく機能する私の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 の動きは保持されません。効果に top: を配置しようとしましたが、うまくいきませんでした。
これらを組み合わせたり、入れ子にしたりしてみましたが、何も機能していないようです。
誰かが他の考えを持っている場合は、これを適切に機能させる方法を知りたい. 単純な調整だと思いますが、それを理解できないようです。
解決
削除:
$('#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'});
フェードを行うためのよりクリーンな方法があるかもしれませんが、これは私の例ではうまくいきました。