jQuery 在动画完成后更改值

Question

这段代码永远不会调用警报'ane is true'。

可以从 jQuery 方法 "animate" 更改局部变量 'ane' 吗？

在我的代码中，变量 'ane' 始终为 false。我尝试使用此方法来更改 '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

JavaScript 只有一个线程。如果使用

while(!ane){}

jQuery无法运行，从而无法执行动画，从而无法完成动画并将ane设置为true。

Answer 3

@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 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 最终应该为 true，因为这次执行没有被 while 循环锁定。

Answer 5

感谢大家。我用它来在动画后继续执行相同的函数：

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