爲什麼在任何動畫開始之前第三個動畫的「完成」回調會先發生?瞭解對象文字中的JavaScript匿名與命名函數
腳本:
$("#animate").delay(2000).animate(
{ "width": "500px" },
{ "duration": 3000,
"complete": function(){ $("#animate").append("1st<br />"); }}
)
.delay(1000).animate(
{ "width": "200px" },
{ "duration": 3000,
"complete": function(){ complete("2nd"); }}
)
.delay(1000).animate(
{ "width": "500px" },
{ "duration": 3000,
"complete": complete("3rd") }
);
function complete(ordinal){
$("#animate").append(ordinal + "<br />");
};
HTML:
<div id="animate" />
CSS:
#animate
{
border: 1px solid red;
height: 200px;
width: 200px;
}
的jsfiddle:
這很清楚。它讓我意識到parens進行調用,就像模式:'(function(){...})();'。知道它返回了'undefined',並且它期待一個函數聲明,而是讓我重寫'complete()'並且仍然保持'「complete」的簡潔可讀性:complete(「3rd」)' 。新函數:'function complete(ordinal){return function(){...}; };'。 – ThinkingStiff