刷新動畫，然后重定向到不同的URL

Question

這可能是一個非常無聊的問題......但我無法弄明白。

我有一個頁面，有一個按鈕..

我想要的是..當我點擊那個按鈕然后它顯示一個“處理”的動畫

像這樣

http://ajaxload.info/

然后幾秒鍾后......轉發到網址

說google.com

我相信這是非常微不足道的......但我無法思考它。

到目前為止，我只有一個按鈕:(

Answer 1

如果你正在使用.animate ，你還沒有告訴你如何制作動畫

.animate（properties [，duration] [，easing] [，complete]）

它提供了一個完整的回調，你可以在其中進行重定向

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

DEMO

Answer 2

試試.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);
});

Answer 3

使用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);
});