javascript - jquery animate（）を使用してテキストのバウンス効果を実現しますか？

Question

私はJqueryを使用してバウンス効果を作成しようとしています。これは私がこれまでに持っているものです：

HTML：

<div id ="animation">bounce</div>

Jquery：

$("#animation").animate({ marginTop: "80px" }, 1500 )
               .animate({ marginBottom: "40px" }, 800 );

下向きになりますが、上向きにはなりません。ドキュメントを検索してみましたが、そうではありません。

ここでの作業例：http：//jsfiddle.net/zLw8F/

score 7 · Accepted Answer

再び上に行くmargin-topには、アニメートする代わりに減らす必要がありますmargin-bottom：

$("#animation").animate({ marginTop: "80px" }, 1500 )
               .animate({ marginTop: "40px" }, 800 );

ただし、ページの残りの部分から切り離された要素をアニメーション化するには、余白で遊ぶのではなく、相対的な配置をお勧めします。

score 5 · Accepted Answer

jQuery UIエフェクトを使用しないのはなぜですか？元：

$("#animation").effect("bounce", { times:3 }, 300);

score 1 · Accepted Answer

それを試してください：

$("#animation").animate({ marginTop: "80px" }, 1500, function() {
  $(this).animate({ marginTop: "40px" }, 800 );
});

3 に答える 3