jQuery изменить значение после завершения анимации

Question

Этот код никогда не вызывает оповещения 'ane is true' .

Можно изменить локальную переменную 'ane' из метода jQuery "animate" ?

В моем коде переменная 'ane' всегда ложна. Я пытаюсь использовать этот метод для изменения значения 'ane' :

function anim() {
  var ane = false;
  $('#element').animate({left:'100px'}, 5000, function(){ ane = true; });
  while(!ane){}
  alert('ane is true');
}

Это также не работает для меня:

function anim() {
  var ane = false;
  var ant = function(){ ane = true; }
  $('#element').animate({left:'100px'}, 5000, ant);
  while(!ane){}
  alert('ane is true');
}

Спасибо за ответ.

Answer 1

Демонстрация в реальном времени

function anim() {
  var ane = false;
    $('#element').animate({left:'100px'}, 5000, function(){
        ane = true;
        if(!$(this).is('animated')){
            alert(ane);
        }
    });
}

После завершения анимации вы будете предупреждены.

Answer 2

Ответ @Loktar правильный, но вы можете опустить условие

function anim() {
  var ane = false;
    $('#element').animate({left:'100px'}, 5000, function(){
        ane = true;
        // the animation is already finished
        // if(!$(this).is('animated')){
        //    alert(ane);
        //}
        alert(ane);

    });
}

, потому что функция вызывается, когда анимация фактически завершена.

Использование последней версии jQuery(> = 1.8) вы можете проверить, действительно ли анимация завершена, используя опцию done :

function anim() {
    var ane = false;
    $('#element').animate({width:'100px'}, 
                      {duration: 5000,
                       done: function () {alert("done")}
                      });
}

Answer 3

Спасибо всем.Я использовал это, чтобы продолжить в той же выполняемой функции после анимации:

// animation part
var ane = false; // check if animation end
$('#element').animate({left:'100px'}, 5000, function(){ane = true;});

// continue only if animation done
var fcb = setInterval(function(){ if(ane) {
  // continue executing function
  clearInterval(fcb); 
  // ...
  // nextCodePart();
  // ...
} }, 20);

Answer 4

Попробуйте:

function anim() {
  var ane = false;
  var ant = function(){ ane = true; }
  $('#element').animate({left:'100px'}, 5000, ant);
  setInterval(function(){ if(ane) { alert('ane is true'); } }, 100); 
}

ane должно в конечном итоге быть истинным, поскольку на этот раз выполнение не блокируется циклом while.

Answer 5

JavaScript имеет только один поток. Если вы используете

while(!ane){}

jQuery не может работать, поэтому не выполняет анимацию, поэтому не завершает анимацию и присваивает ane значение true.