Javascript插件只触发一次

我已经构建了一个非常基本的jQuery插件，它基本上每隔x毫秒定位一个sprite图像，以创建动画效果。这个阶段的插件非常基本，只有几个选项，而且运行得非常好

除此之外，它只发射一次！我在一个页面上有多个动画实例，它们都会触发，但每次只触发一次

现在我不是Javascript方面的专家，只是勉强拼凑了一下，但下面是代码：

// Animation Plugin
(function($){

  $.fn.anime = function(customOptions) {
    // Default Options 
    var defaultOptions = {
        slideWidth  : 100,
        frames      : 10,
        speed       : 40,
        minCycles   : 1,
        stopFrame   : 0
    };

    // Set options to default  
    var options = defaultOptions;  

    // Merge custom options with defaults using the setOptions func
    setOptions(customOptions);

    // Merge current options with the custom option
    function setOptions(customOptions) {
        options = $.extend(options, customOptions);
    };

    return this.each(function() {
      // Initialize the animation object
      var $elem = $('img', this);
      var frameCount = 0;
      var currentSlideWidth = options.slideWidth;
      var intervalID = null;
      var cycleCount = 1;

      var animate = function() {
        if (frameCount < (options.frames -1)) {
          $elem.css('left', '-' + currentSlideWidth + 'px');
          frameCount++;
          currentSlideWidth += options.slideWidth;
        }
        else {
          if (cycleCount < options.minCycles)
          {
             frameCount = 0;
             currentSlideWidth = options.slideWidth;
             $elem.css('left', '-' + currentSlideWidth + 'px');
             cycleCount++;
          }
          else
          {
            window.clearInterval(intervalID);
            $elem.css('left', '0px');
          }
        }
        cycleCount = 1;
      };

      $(this).bind('mouseover', function(){
        var intervalID = window.setInterval(animate, options.speed);
      });
    });

  };
})(jQuery);

这是调用它的html：

<div class="anime" id="animeBolt">
  <img src="_assets/img/anime-bolt.png" alt="Lightning Bolt" width="3100" height="114">
</div>

---

如何让插件反复启动？

我已经使用您的代码创建并修改了JSFIDLE示例。它起作用了

我改变了两件事：

• 在鼠标悬停时添加clearInterval以防止多个重叠间隔
• 将intervalID变量移到每个函数的外部，并从mousover处理程序中删除var关键字，这样脚本将记住上次鼠标悬停时的intervalID集
• 在动画结束时重置frameCount、cycleCount和currentSlideWidth变量（这实际上是让动画运行不止一次的线索）

---

希望这会有所帮助，我已经使用您的代码创建并修改了JSFIDLE示例。它起作用了

我改变了两件事：

• 在鼠标悬停时添加clearInterval以防止多个重叠间隔
• 将intervalID变量移到每个函数的外部，并从mousover处理程序中删除var关键字，这样脚本将记住上次鼠标悬停时的intervalID集
• 在动画结束时重置frameCount、cycleCount和currentSlideWidth变量（这实际上是让动画运行不止一次的线索）

---

希望有帮助

请提供指向此anime-bolt.png图像的链接。我正在尝试为这一点提供JSFIDLE示例。请提供一个指向anime-bolt.png图像的链接。我正试图为这一点想出一个JSFIDLE的例子。这绝对是非常棒的WTK，非常感谢，我会在这里呆上几天！我发现了一个小错误，但纠正了它，如果你把minCycle选项设置为2或更多，那么这个循环会继续下去，为了纠正这个错误，我删除了最后一个cycleCount=1；很抱歉，我没有及时上传图片，但是如果你想从js fiddle示例中获益，我会通过电子邮件发送给你？不，我认为我们现在很好。我很高兴我的解决方案奏效：）那绝对是太棒了WTK，非常感谢，我会在这里呆上几天！我发现了一个小错误，但纠正了它，如果你把minCycle选项设置为2或更多，那么这个循环会继续下去，为了纠正这个错误，我删除了最后一个cycleCount=1；很抱歉，我没有及时上传图片，但是如果你想从js fiddle示例中获益，我会通过电子邮件发送给你？不，我认为我们现在很好。我很高兴我的解决方案奏效：）

<div class="anime" id="animeBolt">
  <img src="_assets/img/anime-bolt.png" alt="Lightning Bolt" width="3100" height="114">
</div>

.anime {
  position: absolute;
  overflow: hidden; }

.anime img {
  position: absolute;
  left: 0;
  top: 0; }

#animeBolt {
  top: 2669px;
  left: 634px;
  width: 62px;
  height: 116px; }