如何使不同的动画在同一页面上独立开始悬停，并在鼠标离开的原始状态与JQuery动画

How to make different animations on same page independantly start on hover and go to original state upon mouseleave with JQuery Animate

本文关键字：动画 原始 离开 鼠标 原始状 状态 JQuery 开始 一页 何使不 独立      更新时间：2023-09-26

好吧，我到处找，但就是找不到我问题的答案。

我有很多CSS3过渡和动画，实际上想在ie8 -9上实现它们。但是我对javascript还是个新手。

首先这是我的网站http://tinyurl.com/axjuccx你会看到使用的css动画。

现在，我试图实现的是相同的，但与Jquery animate()函数。

作为一个例子，让我们以这段代码为例，当我将鼠标悬停在名为go的按钮上时，我将一个名为block的div动画化。

$("#go").mouseenter(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
$("#go").mouseleave(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});

这似乎不工作，如果我离开"mouselleave"部分，然后它动画，但停留在动画状态。我想让它在鼠标离开时恢复。

任何帮助都是感激的。

真诚

使用stop()可以有所帮助;

$("#go").hover(
  function () {
    $("#block").stop(true, true).animate(... your code here ...);
  }, 
  function () {
    $("#block").stop(true, true).animate(... your code here ...);
  }
);
JQuery stop(): http://api.jquery.com/stop/

JQuery徘徊():http://api.jquery.com/hover/

相关文章：