Question

我已经构建了一个非常基本的jQuery插件，它基本上每隔x毫秒将精灵图像放置一个设定量，以创建动画效果。这个阶段的插件非常基础，只有一些选项，而且效果非常好。

除了它只发射一次这个事实！我在一个页面上有多个动画实例，它们都会触发，但每次都会触发一次。

现在我不是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);

用于在dom元素上调用实际插件的代码是：

$('#animeBolt').anime({
  frames:   50,
  slideWidth: 62,
  minCycles: 1,
  speed: 30,
});

这是调用它的html：

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

最后是css：

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

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

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

如何重复触发插件？

Answer 1

我使用您的代码创建并修改了jsfiddle示例。它工作http://jsfiddle.net/9Yz9j/16/

我改变了一些事情：

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

希望有所帮助

Javascript插件只触发一次

1 个答案: