Question

我无法让我的图标在悬停时上下晃动，但我只能设法让它在每个悬停时完成一个完整的循环。

这是页面。元素/图标是“商业”图像。 http://fdtcincinnati.com/landing-page

这种效果（或类似的眨眼效果）是如何实现的？

谢谢！

修改

这是Jquery / JS：

$(document).ready(function() {

    var timeout = '';
    var intervalId = null;
    var bouncing = false;

    $("a#business").hover(function() {

        bouncing = true;
        bounce($(this), bouncing, 160, 170);

    }, function() {

        bouncing = false;
        bounce($(this), bouncing, 160, 170);

    });

});

function bounce(ob, bouncing, val1, val2) {

    if (! bouncing) {

        ob.animate({ "top": val1 + "px" }, 400);

    } else {

        ob.animate({ "top": val1 + "px" }, 400).animate({ "top": val2 + "px" }, 400);

        setTimeout(bounce(ob, bouncing, val1, val2), 800);

    }

}

这是HTML：

    <body id="landing_page">

    <div id="fp_wrapper">

        <h1 id="lp_logo"><a href="/">First Discount Travel Cincinnati</a></h1>

        <a id="business" href="">Business</a>

        <a id="leisure" href="">Business</a>

        <p id="below">Click one of the couples to continue!</p>

    </div><!-- end fp_wrapper -->

</body>

Answer 1

一些非常通用的代码 - 设置一个标志，指示当悬停结束时是否继续并清除该标志：

var bouncing = false;

$("#yourelement").hover(
   function() {
      bouncing = true;
      yourBounceFunction();
   },
   function() {
      bouncing = false;
   }
);

function yourBounceFunction() {
   if (!bouncing) {
      // stop the animation
   } else {
      // continue current animation
   }
}

如果没有看到你的代码，我真的无法提供更具体的内容。

编辑，既然您已发布了代码：您的代码中的以下行不起作用：

setTimeout(bounce(ob, bouncing, val1, val2), 800);

您需要将setTimeout()函数引用作为第一个参数传递。您的代码实际上使用这些参数调用bounce()函数，并将结果（未定义）传递给setTimout()。尝试以下操作，将匿名函数定义为setTimeout()的参数，并在该函数内调用您的函数：

setTimeout(function(){ bounce(ob, bouncing, val1, val2); }, 800);

话虽如此，你可能想要摆脱超时，然后再从动画的完整处理程序中再次调用该函数。

此外，您不应将bouncing作为参数传递给函数，您希望函数访问与悬停处理程序相同的变量。因此，将反弹函数定义移动到document.ready中（或将bouncing变量声明为全局的外部文档。）：

$(document).ready(function() {

    var bouncing = false;

    $("a#business").hover(function() {
       bouncing = true;
       bounce($(this), 160, 170);           
    }, function() {
       bouncing = false;
    });

    function bounce(ob, val1, val2) {
       if (!bouncing) { 
          // stop bouncing: animate back to default position
          ob.animate({ "top": val1 + "px" }, 400);
       } else {
          ob.animate({ "top": val1 + "px" }, 400)
            .animate({ "top": val2 + "px" }, 400, function() {
                // animation just finished, so go again:
                bounce(ob, val1, val2);
            });
       }
    }

});

我还没有测试过最后一个选项，但是想法是你提供了一个回调函数，让jQuery在动画完成后调用，所以在回调中你再次调用你的反弹函数。你不需要在回调中再次测试bouncing变量，因为你的反弹功能首先做的就是测试它。

（.animate()在持续时间之后将可选的回调函数作为参数 - 有关完整回调函数如何工作的详细信息，请参阅jQuery .animate() doco。）

Answer 2

我想这取决于你的'弹跳'是什么意思

如果你只是希望它是动画的，你不需要用jquery来做。你能用一个动画gif＆amp;为悬停状态定义一些css？

#youricon:hover {
  background-image: url(images/bounce.gif);
}

Answer 3

也许你可以利用jQuery UI弹跳效果。这简化了您需要的代码量。我将数据对象附加到business图像，这样您就不需要依赖全局变量了。然后使用反弹效果的回调来循环动画。

http://jsfiddle.net/RkNV2/2/

$('img').hover( 
    function() { $(this).data('bounce', true); bounce($(this));}, 
    function() { $(this).data('bounce', false);
});

function bounce($elem) {
    $elem.effect('bounce', { times: 1, distance: 10 }, 500, function() {
        if ($(this).data('bounce')) bounce($elem);
        else $elem.stop();
    });
}

反弹效果让您可以控制反弹次数，反弹距离，方向和模式。

http://docs.jquery.com/UI/Effects/Bounce

如何使图标反弹直到它丢失与Jquery悬停？

3 个答案: