Javascript 使用Jquery如何在悬停时无休止地运行函数，然后在悬停关闭时完成

我在地图上有一个点，我正试着按这个点的大小跳动。我的动画效果很好，但我无法解决两个问题：

未捕获范围错误：超过最大调用堆栈大小

当我停下来再停回来时，它不会再开始

以下是我的jquery：

$('.round-dot').hover(function() {
    var dot = $(this).children('img');
    pulseSucka(dot);
  }, function() {
    var dot = $(this).children('img');
    dot.finish();
  }
);

function pulseSucka(dot){
    $(dot).animate({
        height: '24',
        width: '24',
        paddingLeft: '0',
        paddingTop: '0'
      }, 300, function() {
        // First animate complete
        $(dot).animate({
          height: '18',
            width: '18',
            paddingLeft: '3',
            paddingTop: '3'
          }, 300, function() {
            // Second animate complete
            pulseSucka(dot);
        });
    });
}   

圆点开始时是18px（w/h），我设置了宽度和填充的动画，使其看起来像是脉冲。我对悬停的速度和动画很满意，但当我停止悬停时，它不会回到“正常”，当我再次悬停时，它什么也不会做

---

这是一个jsFiddle

可以使用window.requestAnimatedFrame分离递归调用

工作样本

$('.round-dot').hover(function() {
    console.log("a");
    var dot = $(this).children('img');
    pulseSucka(dot);
  }, function() {
    var dot = $(this).children('img');
    dot.finish();
  }
);

function pulseSucka(dot){
    $(dot).animate({
        height: '24',
        width: '24',
        paddingLeft: '0',
        paddingTop: '0'
      }, 300, function() {
        // First animate complete
        $(dot).animate({
          height: '18',
            width: '18',
            paddingLeft: '3',
            paddingTop: '3'
          }, 300, function() {
             // Second animate complete
              var f = function() {
                  pulseSucka(dot);
              }
              requestAnimationFrame(f);
        });
    });
}   

见修改

代码

$('.round-dot').hover(function() {
    console.log("a");
    var dot = $(this).children('img');
    pulseSucka(dot);
  }, function() {
    var dot = $(this).children('img');
    dot.finish();
  }
);

function pulseSucka(dot){
    $(dot).animate({
        height: '24',
        width: '24',
        paddingLeft: '0',
        paddingTop: '0'
      }, 300, function() {
        // First animate complete
        $(dot).animate({
          height: '18',
            width: '18',
            paddingLeft: '3',
            paddingTop: '3'
          }, 300, function() {
             // Second animate complete
              var f = function() {
                  pulseSucka(dot);
              }
              requestAnimationFrame(f);
        });
    });
}   

---

有多种方法可以做到这一点，但这里有一种是基于您的代码。我为您的函数（状态）添加了另一个选项，以便它可以处理动画的开始和停止

如果您想要一种纯CSS方法（如果您不使用较旧的浏览器，我建议您使用这种方法），下面是代码

---

pluseSucka

正在调用自身，导致无限递归，并破坏堆栈。也发布html并进行fiddleGood调用，现在就开始。。。2秒。发布了一个JSFIDLE@jonathonReinhart，我知道我是，但这确实是我的问题：如何让函数无休止地运行，直到我将鼠标移出？为什么要投反对票？不够清晰，很高兴修复，尝试学习。对我来说，鼠标上的脉冲不会停止。停止悬停。使用此站点（）创建您自己的缓和函数，并应用它，看起来它会使整个过程变得平稳。不知道如何实施。。。再次感谢Hanks，我不知道有一个纯css选项。我喜欢。我必须考虑ie8+所以我需要js。。。非常感谢

@keyframes pulsate {
    0%, 100% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.3, 1.3);
    }
}
@-moz-keyframes pulsate {
    0%, 100% {
        -moz-transform: scale(1, 1);
    }
    50% {
        -moz-transform: scale(1.3, 1.3);
    }
}
@-webkit-keyframes pulsate {
    0%, 100% {
        -webkit-transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.3, 1.3);
    }
}