繼續執行一個功能

Question

我很難在一個剛剛完成後讓另一個功能工作。我的代碼的前半部分起作用，但之後的功能不起作用。我究竟做錯了什麼？

的HTML

<div id="feature"> 
    <div id="open"></div> 
</div> 

的CSS

#feature { 
    position:relative; 
    width:100%; 
    height:450px; 
} 
#open { 
    position:relative; 
    width:100%; 
    height:200px; 
    background:red; 
} 

jQuery的

$('#open').click(function() { 
    $(this).animate({ 
     height: 50 
    }, { 
     duration: 'slow' 
    }).css('overflow', 'visible'), 
    function() { 
     $('#open').animate({ 
      height: 200 
     }, { 
      duration: 'slow' 
     }) 
    }; 
    // Animation complete. 
}); 

一個JS提琴。

http://jsfiddle.net/C8fA7/

Answer 1

功能需要有一個參數animate，但你把它css後，你已經完成了調用animate很久以後。試試這個：

$(this).animate({ 
    height: 50 
}, { 
    duration: 'slow' 
}, function() { 
    $('#open').animate({ 
     height: 200 
    }, { 
     duration: 'slow' 
    }) 
}).css('overflow', 'visible'); 

這變得更清晰，如果我們作出明確的鏈接：

var temp = $(this); 
temp = temp.animate({ height: 50 }, { duration: 'slow' }); 
temp = temp.css('overflow', 'visible'); 

在這一點上，你只是離開了這個流浪功能：

function() { 
    $('#open').animate({ height: 200 }, { duration: 'slow' }); 
} 

有沒有語法錯誤，但它什麼都不做，因爲它從來沒有被調用過。

此外，您的評論// Animation complete表示您可能沒有意識到動畫是異步的。當您完成animate聲明時，動畫已開始，但尚未完成。您的回調函數將在動畫完成時調用; animate呼叫之後的陳述將不會等待。