0

好的，我到处搜索，但我找不到我的问题的答案。

我有许多 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”部分，那么它会动画但保持动画状态。我希望它在鼠标离开时恢复。

任何帮助表示赞赏。

真挚地

4

1 回答 1

0

使用 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 悬停（）：http ://api.jquery.com/hover/

于 2013-01-04T09:33:01.767 回答