jquery - 基本 JQuery/JQueryUI 未按预期运行 - 我哪里出错了？

Question

我第一次尝试使用 JQuery/JQUI 来创建一个简单的社交图标弹跳效果。

我认为下面的代码已经成功了..

http://testing.renewablehull.co.uk/css3.html

..但是有两个问题:

• 动画队列(我似乎无法让它们用 .stop() 停止)
• 如果您四处移动鼠标，图标位置会不断变化(twitter 图标移动到 facebook 下方，facebook 图标向左/向下滑动)。

显然我在这里遗漏了一些东西!我是一个新手，所以请保持温和并为我指明正确的方向。

非常感谢

B.

Answer 1

你可以防止动画像这样堆叠:

$(document).ready(function ()
{
    $('img').mouseover(function ()
    {
        if (!$(this).hasClass("img-hover"))
        {
            $(this).addClass("img-hover");
            $(this).effect("bounce", { times: 3, distance: 8 }, function ()
            {
                $(this).removeClass("img-hover");
            }, 0);
        }
    });
});

顺便说一下，您可以使用以下方式停止效果:

.stop (true, true);

阅读Jquery documentation on stop理解为什么你需要 true, true 。