仅针对特定事件限制 Jquery 动画

Question

我有滑动菜单，我在其中使用 mouseover 和 mouseout 方法来触发动画。它正在工作，但是当频繁悬停和鼠标移开时，动画会持续很长时间。我怎样才能将它限制为只反复播放动画。这是我使用的示例代码。

var slide_speed = 400;
$( ".fos-zoom-div" ).mouseover(function() {
    $(this).animate({
        marginTop: "-40px",
        cursor: "pointer"
     }, slide_speed, function() {

     });
});

$( ".fos-zoom-div" ).mouseout(function() {
    $(this).animate({
        marginTop: "0",
        cursor: "pointer"
        }, slide_speed, function() {

        });
});

Answer 1

一开始，当动画即将触发时，可以使用jQuery is()方法检查元素是否当前正在动画，[=13] =]

$( ".fos-zoom-div" ).mouseover(function() {
   if($(this).is(':animated')){
      return false;
   }
   $(this).animate({
     marginTop: "-40px",
     cursor: "pointer"
     /** ... */

如果元素处于动画状态，返回false将不允许new动画进入队列。

仅针对特定事件限制 Jquery 动画

Restrict Jquery Animation for certain event only

javascript

jquery

jquery-animate