jQuery：等待執行任務，直到動畫完成

我有一個放置在任何頁面的div。當你點擊這個div，它會通過使用jQuery在其CSS類檢查被關閉：jQuery：等待執行任務，直到動畫完成

$('.content-box-header').click(function 
() { 
    $(this).parent().children('.content-box-content').slideFadeToggle(200); 
}

在幾頁，我需要設置該分區具有特定ID，以便該分區後執行某些任務關閉。例如：

$('#divleft').live('click', function 
(e) { runTask(); }

上面的示例觸發該div與特定ID = divleft。

問題是，我想在div真的關閉之後檢查一些東西，但在我目前的情況下，在div關閉之前執行runTask（）。

所以我的問題是，怎麼可能的方法runTask（）;在div真的關閉後延遲？

在此先感謝！

來源

2010-08-12 olidev

我想你要找的是.queue（）。請參閱此處的文檔：http://api.jquery.com/queue/

您可以在一組匹配的元素上調用它以獲取有關要運行的其餘效果的一些信息。所以你的情況，你可以做這樣的事情：

$('#divleft').live('click', function (e) { 
    runTaskAfterAnimation() 
}); 

function runTaskAfterAnimation() { 
    if ($('.content-box-content').queue('fx').length == 0) { 
     runTask(); 
    } else { 
     setTimeout(runTaskAfterAnimation, 10); 
    } 
}

查看演示這裏：http://jsfiddle.net/LeHHj/2/

這一次，它肯定工程;）

來源

2010-08-12 16:14:06 Ender

這是最棒的！最簡單的！非常感謝！ – olidev 2010-08-18 19:22:25

在你的情況下，只需使用 $('.content-box-header').click(function() { $(this).parent().children('.content-box-content').slideFadeToggle(200, function() { runTask(); }); }

來源

2010-08-12 14:42:57 puckipedia

嗨，是的，我已經想出了在提出問題之前提出您的建議，但我很好奇如何在另一個事件中單獨執行此操作，並檢查另一個動畫是否正在運行並延遲至完成！其他建議？謝謝！ – olidev 2010-08-12 14:55:30

你可以存儲上使用jQuery's data() method股利的功能。

這可讓您在元素上設置一個「afterClick」功能：

$('.content-box-header').click(function() { 
    var $this = $(this); 
    $this.parent().children('.content-box-content').slideUp(200, function() { 
     var after = $this.data('afterClick'); 
     if (after) after(); 
    }); 
}); 

$('#divleft').data('afterClick', function() { runTask(); });

來源

2010-08-12 15:17:57 minimalis

是的，這是絕對正常工作;）非常感謝！ – olidev 2010-08-18 19:21:41

您需要檢查，如果你是想runTask（）的產品：動畫，如果是「註冊」回調（via .data（））

.live('click', doRunTask); 

doRuntask = function() { 
if ($(this).is(':animated')) 
    $(this).data('afterAnimation', runTask); 
else 
    runTask(); 
}); 


$('.content-box-header').click(function() { 
$(this).parent().children('.content-box-content').slideFadeToggle(200, function() { 
    var cb = $(this).data('afterAnimation'); 
    cb && cb(); 
}); 
}

來源

2010-08-12 15:41:42

這聽起來很酷，以及我的答案上面，謝謝！ – olidev 2010-08-18 19:21:58

jQuery：等待執行任務，直到動畫完成

回答

相關問題