Question

I’ve built a very basic jQuery plugin that essentially positions a sprite image left by a set amount every x milliseconds to create an animation effect. The plugin at this stage is very basic and only has a few options, and it works pretty well.

Apart from that fact that it only fires once! I have multiple instance of the animation on one page and they all fire, but only ever once each.

Now I’m not expert on Javascript and only just managed to cobble this together but here’s the code anyhow:

// 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);

The code used to call the actual plugin on a dom element is:

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

This is the html it is called on:

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

And finally the css:

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

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

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

How do I get the plugin to fire repeatedly?

Answer 1

I’ve created and modified jsfiddle example using your code. It’s working http://jsfiddle.net/9Yz9j/16/

I’ve change a couple of things:

• added clearInterval on mouseover to preven multiple overlapping intervals
• moved intervalID variable to outside of each function, and removed var keyword from mousover handler so the script will remember intervalID set on last mouseover
• reseting the frameCount, cycleCount and currentSlideWidth variables on animation end (that was actually a clue thing to get animation going more than just once)

Hope that helps