Question

我正在尝试仅在鼠标悬停在对象上时才运行动画。我可以获得动画的一次迭代，然后在鼠标输出时恢复正常。但我希望动画能够在鼠标悬停时循环播放。我怎么做，使用setInterval？我有点卡住了。

Answer 1

可以这样做：

$.fn.loopingAnimation = function(props, dur, eas)
{
    if (this.data('loop') == true)
    {
       this.animate( props, dur, eas, function() {
           if( $(this).data('loop') == true ) $(this).loopingAnimation(props, dur, eas);
       });
    }

    return this; // Don't break the chain
}

现在，你可以这样做：

$("div.animate").hover(function(){
     $(this).data('loop', true).stop().loopingAnimation({ left: "+10px"}, 300);
}, function(){
     $(this).data('loop', false);
     // Now our animation will stop after fully completing its last cycle
});

如果您希望动画立即停止，您可以将hoverOut行更改为：

$(this).data('loop', false).stop();

Answer 2

setInterval会返回一个可以传递给clearInterval的ID来禁用计时器。

您可以写下以下内容：

var timerId;

$(something).hover(
    function() {
        timerId = setInterval(function() { ... }, 100);
    },
    function() { clearInterval(timerId); }
);

Answer 3

我需要这个才能为页面上的多个对象工作，所以我修改了一些Cletus的代码：

var over = false;
$(function() {
  $("#hovered-item").hover(function() {
    $(this).css("position", "relative");
    over = true;
    swinger = this;
    grow_anim();
  }, function() {
    over = false;
  });
});

function grow_anim() {
  if (over) {
    $(swinger).animate({left: "5px"}, 200, 'linear', shrink_anim);
  }
}

function shrink_anim() {
  $(swinger).animate({left: "0"}, 200, 'linear', grow_anim);
}

Answer 4

考虑：

<div id="anim">This is a test</div>

使用：

#anim { padding: 15px; background: yellow; }

和

var over = false;
$(function() {
  $("#anim").hover(function() {
    over = true;
    grow_anim();
  }, function() {
    over = false;
  });
});

function grow_anim() {
  if (over) {
    $("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim);
  }
}

function shrink_anim() {
  $("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim);
}

您也可以使用计时器实现此目的。

鼠标悬停时jquery连续动画

4 个答案: