當用戶點擊時用圖像交換按鈕

Question

我希望當用戶點擊按鈕，然後通過Ajax調用頁面方法，然後我想用動畫圖像交換按鈕。告訴我最好的辦法。我知道如何與圖像交換按鈕。這裏有一個樣本。

$('the-button').bind('click', function() { 
    $(this).replaceWith('<img src="/wherever.jpg"/>'); 
}); 

我不知道如何保持按鈕位於頁面上的圖像位置。 基本上我想在按鈕的地方顯示動畫圖像，當用戶點擊它和ajax調用開始，當ajax調用完成後，動畫圖像將再次被按鈕替換。

這裏我給一個演示網址demo.aspnetawesome.com

請告訴我實現我的目標，這將是高度可重用的最佳方式。謝謝。

Answer 1

一種方法是有兩個元素，按鈕和圖像。使按鈕可見並隱藏動畫圖像（顯示：無，以便它不佔用頁面中的任何空間）。然後，當點擊按鈕時，隱藏按鈕並顯示圖像。 如果您使用display：none，那麼提供的按鈕和圖像大小相同並且在DOM中相鄰渲染，它們將消耗相同的位置並且不會影響您的佈局。

所以很不客氣：

var animation = $('#the-image'); 
var button = $('#the-button'); 

button.on('click', function(){ 
    button.hide(); 
    animation.show(); 
});