jQuery動畫完成後更改值

此代碼關閉從未呼叫警報'ane is true'。jQuery動畫完成後更改值

有可能從jQuery方法更改本地變量'ane'「animate」？

在我的代碼變量'ane'始終爲false。我嘗試這種方法的「姊」值變化：答覆

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

感謝：

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

這也不會爲我工作。

來源

2011-03-14 Atiris

這可能不起作用，因爲'而（！ANE）{ ''阻止了一切。在回調中放置一個「alert」，看看它是否顯示。 –

Live Demo

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

一旦動畫完成，你會被警告。

來源

2011-03-14 17:30:49 Loktar

JavaScript只有一個線程。如果您使用

while(!ane){}

的jQuery無法運行，因此不執行動畫，從而無法完成的動畫，並設置ane爲true。

來源

2011-03-14 17:21:20

+1這是真的。另外，你不應該使用「+ = 100px」嗎？ – mattsven

試試這個：

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循環鎖定。

來源

2011-03-14 17:26:01 beeglebug

我推薦使用setTimeout，並且可能會調用一個函數來檢查並重置超時，這是因爲即使在val爲true之後，您也不會繼續收到警報。 – Loktar

或者你可以在間隔函數中使用clearTimeout。我沒有打擾，因爲它超出了原始問題的範圍。 – beeglebug

謝謝大家。我用這個，繼續在執行相同功能的動畫後：

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

來源

2011-03-18 09:00:07 Atiris

@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），您可以檢查動畫是用做選項實際完成：

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

來源

2015-06-03 07:54:04 parameciostudio

jQuery動畫完成後更改值

回答

相關問題