刷新動畫，然後重定向到不同的網址

Question

這可能是一個很noob問題......但我無法弄清楚。

我有一個網頁，其中有一個按鈕..

我要的是..當我點擊該按鈕，則顯示「處理」

這樣

http://ajaxload.info/的動畫

再經過幾秒鐘..期待一個url

說google.com

我相信這是非常平凡的..但我無法考慮它。

到目前爲止，我有什麼只是一個按鈕:(

Answer 1

使用setTimeout()兩秒後調用的位置.. window.loaction重定向

試試這個

HTML

<button id="buttonId">click</button> 
<img src="loading.gif" id="imgid" style="display:none"/> 

jQuery的

$('#buttonId').click(function(){ 
    $('#imgid').show(); //this is where you'll show your loading gif 
    setTimeout(function(){window.location="http://google.com";}, 2000); 
}); 

Answer 2

你還沒有告訴你如何動畫，如果你使用的是.animate

.animate（屬性[，時間] [，緩和] [，完成]）

它提供了一個完整的回調中，你可以重定向像

$(/*your selector*/).animate({ 
    opacity: 0.25, 
    }, 5000, function() { 
    // Animation complete. 
    location.href='www.google.com'; 
    }); 

DEMO

Answer 3

嘗試在.click()並使用setTimeout()：

$(function(){ 
    $('button').click(function(){ 
    $('body').addClass('processing'); // <---------css class with bg img of loading 
    setTimeout(function(){ 
     window.location.href = 'http://google.com'; 
    },2000); //<---------after 2 sec page redirect to specified location. 
    }); 
}); 

更好

用這樣的方式：

$('button').click(function() { 
    $(this).after('<img src="http://www.ebay.vn/assets/96ab871/images/loading.gif" />'); 
    setTimeout(function() { 
     window.location.href = 'http://jsfiddle.net/6nMKb/'; 
    }, 2000); 
});