Question

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

我认为下面的代码已经钉了它..

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

..但有两个问题：

动画队列（我似乎无法让它们停止.stop（））
如果你移动鼠标，一遍又一遍地改变图标的位置（twitter图标移动到facebook下方，facebook图标向左/向下滑动）。

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

非常感谢

乙

Answer 1

你的选择要么只要它们被翻过来就会无限地进行，或者只做一次然后停止。我建议后者作为最终用户。

这是你在第一次使用效果回调完成后停止的方式：

 $(document).ready(function(){
          $('img').hover(function(){
              $(this).effect("bounce", { times:3, distance:8},function(e){

                  //disables it from going again
                  e.preventDefault();

                  //resets the position from relative to static
                  $(this).css('position','static');

              }, 0);                     
          });  
    });

另外我注意到你的定位问题与jQuery效果有关，将元素保留为position:relative，所以一旦改回static，它看起来很好。

Answer 2

您可以阻止动画堆叠如下：

$(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的原因。

基本的JQuery / JQueryUI没有按预期运行 - 我哪里出错了？

2 个答案: