JQuery получить анимацию шаги до анимации, возможно?

Question

Мне нужно получить список шагов, которые jquery будет циклически проходить до анимации.

Например, если у меня есть:

$("div#whatever").animate({"left":500}, {
    duration: 1000,
    easing: 'easeOutQuad'
});

Что мне действительно нужно, так это получить массив «левых» позиций ДО вызова анимации.

как:

var positions = ['0','255','350','390','420','440','455'..... '500'];

Обратите внимание, что это легко принять во внимание. Я видел несколько забавных применений animate для подсчета чисел, и это была моя первоначальная мысль, однако все это означало бы запуск анимации, которую я не могу сделать.

У кого-нибудь есть мысли о том, как это сделать?

Answer 1

Вы можете написать функцию для обработки массива позиций. Когда анимация завершится, функция animation () будет вызвана снова с массивом и переменной, которая сохраняет следующий индекс.

Функция может выглядеть так:

  var positions = ['0','255','350','390','420','440','500'];
  function animate(positions,i){

  if(typeof i === 'undefined'){
   i = 0; 
  }

  if(i < positions.length){


   $("#hello").animate({"left":positions[i]}, {
    duration: 1000,
    complete: function(){
     i++;
    animate(positions,i);
   }
 }); 
}

}

одушевленные (позиции);

Answer 2

Создать свою собственную функцию анимации?

jQuery.fn.animateLeft = function(prop1, prop2) {
  var left = new Array();

  //add left
  this.each(function() {
    if(this.style && this.style.left) {
      left.push(this.style.left);
    }
    else {
      left.push(0);
    }
  }

  //animate
  this.animate(prop1, prop2);
  return left;
};

, за которой следует

var positions = $("div#whatever").animateLeft ({"left":500}, {
    duration: 1000,
    easing: 'easeOutQuad'
});