javascript - 刷新动画，然后重定向到不同的 url

Question

这可能是一个非常菜鸟的问题......但我无法弄清楚。

我有一个有一个按钮的页面..

我想要的是..当我点击那个按钮时，它会显示一个“处理”的动画

像这样

http://ajaxload.info/

然后几秒钟后..转发到一个网址

说 google.com

我敢肯定这很微不足道..但我无法考虑。

到目前为止，我所拥有的只是一个按钮 :(

Answer 1

如果您使用的是.animate ，您还没有告诉过您是如何制作动画的

.animate（属性[，持续时间] [，缓动] [，完成]）

它提供了一个完整的回调，您可以在其中进行重定向

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

演示

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