Плагин Javascript запускается только один раз - PullRequest
Новая
       0

Плагин Javascript запускается только один раз

1 голос
/ 02 сентября 2011

Я создал очень простой плагин 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; }

Как заставить плагин многократно срабатывать?

1 Ответ

1 голос
/ 02 сентября 2011

Я создал и изменил пример jsfiddle, используя ваш код. Работает http://jsfiddle.net/9Yz9j/16/

Я изменил пару вещей:

  • добавлен clearInterval при наведении курсора, чтобы предотвратить несколько перекрывающихся интервалов
  • переместил переменную intervalID за пределы каждой функции и удалил ключевое слово var из обработчика mousover, чтобы скрипт запомнил интервалID, установленный при последнем наведении мыши
  • сброс переменных frameCount, cycleCount и currentSlideWidth в конце анимации (на самом деле это была ключевая вещь для запуска анимации более одного раза)

Надеюсь, это поможет

...