jquery - jQuery UI アニメーション

Question

私はjQueryが初めてで、求めている結果を得るのに苦労しています。

この例のように、カーソルを合わせてアニメーション化したい画像が div にあります。http://thewebsitedeveloper.co.nz/thinkRedTest/pattonNz/optionOne.html

これは問題なく機能しますが、画像が継続的に跳ね返らないことをお勧めします。マウスが含まれているdivを離れるまで、画像を上に移動して上げた位置にとどめたいだけです。

これは、現在アニメーション化しているスクリプトです。

$('.gHover').hover(function ()
{
    $(this).effect("bounce", { distance: 3, times:1 }, 900);
});

Answer 1

$('.gHover').hover(function() {
  $(this)
    .css('position', 'relative')
    .stop(true, false)
    .animate({ top: '-10px' }, 400);
}, function() {
  $(this)
    .stop(true, false)
    .animate({ top: 0 }, 400);
});

これはCSSでも実現できますが、トランジションをサポートする最新のブラウザーに使用する方が適切です。そうでない場合は、上記のJSにフォールバックできます。ここでの両方の例：

http://jsbin.com/omofis/2/edit

Answer 2

mouseenterの代わりにイベントを使用hover