如何用JQuery动画在同一页上独立制作不同动画鼠标离开时开始悬停并返回原始状态

Question

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

我有许多CSS3过渡和动画，实际上想实现他们的internet explorer 8-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 );
});

这似乎不起作用，如果我省略了"mouseleave“部分，那么它就会动画，但会停留在动画状态。我想让它恢复到mouseleave上。

任何帮助都是非常感谢的。

由衷地

Answer 1

使用stop()可能会有所帮助；

$("#go").hover(
  function () {
    $("#block").stop(true, true).animate(... your code here ...);
  }, 
  function () {
    $("#block").stop(true, true).animate(... your code here ...);
  }
);

JQuery ()：http://api.jquery.com/stop/

JQuery hover()：http://api.jquery.com/hover/