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

使用mouseenter事件而不是hover

Answer 2

$('.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