Javascript jQuery在动画完成后更改值

此代码从不调用警报“ane为真”

是否可以从jQuery方法“animate”更改局部变量“ane”

在我的代码中，变量‘ane’总是false。我尝试使用此方法更改“ane”值：

这也不适用于我：

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

---

感谢回复。

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

while(!ane){}

---

jQuery无法运行，因此无法执行动画，因此无法完成动画并将

ane

设置为true。

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

while(!ane){}

jQuery无法运行，因此无法执行动画，因此无法完成动画并将

ane

设置为true。

尝试以下操作：

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循环锁定。

尝试以下操作：

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循环锁定。

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

动画完成后，您将收到警报。

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

---

动画完成后，您将收到警报。

感谢大家。在动画之后，我使用此选项在相同的执行函数中继续：

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

---

谢谢大家。在动画之后，我使用此选项在相同的执行函数中继续：

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

---

@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")}
                      });
}

---

@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")}
                      });
}

---

这可能不起作用，因为（！ane）{}正在阻止一切。在回调中放置一个

警报

，并查看它是否显示。这可能不起作用，因为（！ane）{}正在阻止一切。在回调中放置一个

警报

，查看是否显示。我建议使用setTimeout，或者调用一个函数来检查并重置超时，因为这样即使val为真，您也不会一直收到警报。或者您可以在interval函数中使用clearTimeout。我没有费心补充，因为这有点超出了原始问题的范围……我建议使用setTimeout，或者调用一个函数来检查并重置超时，因为这样即使val为真，您也不会一直收到警报。或者您可以在interval函数中使用clearTimeout。我没有费心补充，因为这有点超出了原始问题的范围。。。