Как назвать много раз «анимировать» из класса?

Question

У меня есть метод в классе:

function myClass(){ 

    this.showTab = function(){ 

     $('#tab-image').stop().animate(
      { left: 500 + 'px' }, 
      500 , function(){ 
       alert('end'); 
      } 
     ); 

    } 

} 

и я называю этот метод дважды:

var obj = new myClass(); 
obj.showTab(); 
$('#tab-image').css({ left: -500 + 'px' }); 
obj.showTab(); 

Этот код работает, но во второй раз шоу без неживой. Как это сделать?

Answer 1

Функция анимирования работает в асинхронном режиме . Это означает, что второй анимит не дожидается до первого завершения, поэтому оба выполняются параллельно. Вот почему анимат имеет второй параметр: установить функцию обратного вызова, которая будет выполнена после завершения анимации.

Это должно работать:

function myClass() { 

    this.showTab = function(callback) { 

     $('#tab-image').stop().animate({ 
      left: 500 + 'px' 
     }, 500, callback); 

    } 

} 

var obj = new myClass(); 
obj.showTab(function() { 
    $('#tab-image').css({ 
     'left': -500 + 'px' 
    }); 
    obj.showTab(); 
});​ 

Или, если вам нужно сделать что-то еще, прежде чем функции обратного вызова:

function myClass() { 

    this.showTab = function(callback) { 

     $('#tab-image').stop().animate({ 
      left: 500 + 'px' 
     }, 500, function() { 
      //Insert your code here 
      if(typeof callback === "function") callback(); 
     }); 

    } 

} 

Надеется, что это решит вашу проблему!

Answer 2

Я думаю, что это вызвано быстрым нарастанием эффектов анимации.

Что вы должны сделать, чтобы предотвратить это, передается два параметра для метода stop();

stop(true, true) 

Это приведет к тому, что очередь эффектов станет ясной очередью и что она подскочит до конца.