如何防止JavaScript多次应用mouseover事件

我在测试

mouseover

事件时注意到一个问题。在下面的示例中，有一个图像，当您将其悬停时，它会变大，当鼠标不在时，它会恢复到正常大小，但当您将鼠标快速地多次传递到它上面时，它会不断地变大变小几次，就像它已记住鼠标在其上的每一次传递，并不断地反复播放动画一样

下面是一个活生生的例子： 继续快速地将鼠标移到图像上并移出图像，然后将鼠标移开，您将看到。

使用：

使用：

---

您可以在设置动画时添加类，并在动画完成后将其删除，并且仅在未将类应用于元素时应用新动画。例如：

 $(document).ready(function(){
       $('#imgSmile').width(200);
       $('#imgSmile').mouseover(function()
       {
           if(!$(this).hasClass('animating')){
              $(this).css("cursor","pointer");
              $(this).addClass('animating');
               $(this).animate({width: "250px"}, 'slow',function(){
                    $(this).removeClass('animating');
               });
           }
       });

    $('#imgSmile').mouseout(function()
      {   
          $(this).animate({width: "200px"}, 'slow');
       });
   });

---

演示：

您可以在设置动画时添加类，并在动画完成后将其删除，并且仅在未将类应用于元素时应用新动画。例如：

 $(document).ready(function(){
       $('#imgSmile').width(200);
       $('#imgSmile').mouseover(function()
       {
           if(!$(this).hasClass('animating')){
              $(this).css("cursor","pointer");
              $(this).addClass('animating');
               $(this).animate({width: "250px"}, 'slow',function(){
                    $(this).removeClass('animating');
               });
           }
       });

    $('#imgSmile').mouseout(function()
      {   
          $(this).animate({width: "200px"}, 'slow');
       });
   });

---

演示：

请允许我向您介绍CSS3，它使jQuery过时：

HTML:

---

JS：没有

请允许我向您介绍CSS3，它使jQuery变得过时：

HTML:

---

JS：没有

因此，stop（）使悬停对象停止在任何状态，并从该状态开始对其应用动画？根据文档：当对元素调用.stop（）时，当前运行的动画（如果有）将立即停止。So stop（）使被悬停的对象停止在任何状态，并从该点对其应用动画？从文档：当对元素调用.stop（）时，当前正在运行的动画（如果有）将立即停止。这种方法不能提供一个很好的解决方案，请尝试多次悬停，然后将鼠标移走并再次尝试悬停，动画将不会播放，直到一段时间过去。这种方法不能提供一个好的解决方案，尝试悬停几次，然后将鼠标移开并再次尝试悬停，动画将不会播放，直到一段时间过去。看起来更干净，使用css转换代替javascript时有任何副作用吗？像浏览器兼容性一样，“使jQuery过时”有点宽泛的说法。@不支持转换的TechSupport浏览器只会使图像跳转到更大的大小。我认为这是用户更新浏览器的动机，而不是故意忽略“更新可用”通知。看起来更干净，当使用CSS转换代替JavaScript时会有什么副作用吗？像浏览器兼容性一样，“使jQuery过时”有点宽泛的说法。@不支持转换的TechSupport浏览器只会使图像跳转到更大的大小。我认为这是用户更新浏览器的动机，而不是故意忽略“更新可用”通知。

<img src="......./Smiley.png" alt="smile" id="imgSmile" />