0

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

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

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

..但有两个问题：

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

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

非常感谢

B.

4

2 回答 2

0

您的选择是，只要它们滚动，它就会无限运行，或者只执行一次然后停止。我建议后者，作为最终用户。

这是您在第一次后使其停止的方式，它通过使用效果回调完成：

 $(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，它看起来就很好。

于 2012-06-15T09:53:37.813 回答
0

您可以像这样防止动画堆叠：

$(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);

在 stop 上阅读Jquery 文档以了解您为什么需要true, true在其中。

于 2012-06-15T10:26:44.827 回答