上提交延遲頁變化 - jQuery的

頁眉上提交延遲頁變化 - jQuery的

$(document).ready(function() { 
     $('#user_box').animate({width: "263px"}, "slow"); 

     $('#submit').click(function(){ 
      $('#user_box').animate({width: "0px"}, "slow"); 
     }); 
    });

內容

  <div id="user_box"> 
       <form name="login_form" id="login_form" method="post" action="index.php"> 
        Username:<br /> 
        <input type="text" name="username"><br /> 
        <input type="submit" value="Submit" id="submit" /> 
       </form> 
      </div>

正如你所看到的，我做了點擊提交時是做什麼，user_box以動畫方式返回0pxs（幻燈片對）。問題是我需要延遲大約1秒的頁面加載時間來完成動畫。但只有在點擊提交按鈕時。我如何推遲頁面以允許動畫完成？

我試過..

 $('#submit').delay(3500, function(){ 
      window.location = toLoad; 
     });

沒有快樂。任何幫助將不勝感激。謝謝。

p.s.總體思路是，user_box隨每個查詢滑動並返回結果。它主要是PHP，因此在頁面上從右向左滑動。我稍後會糾正一些事情，以便在登錄時或停止時發生。

來源

2010-09-18 FabienO

最可靠和靈活的方式做到這一點是使用complete callbac在$().animate調用-k選項：

$('#btn_submit').click(function(e){ 
    $submit = $(this); 

    e.preventDefault(); // prevent the form from being submitted until we say so 

    $('#user_box').animate(
     { width: "0px" }, 
     { 
      duration: "slow", 
      complete: function(){ //callback when animation is complete 
       $submit.parents('form').submit(); 
      } 
     } 
    ); 
});

請注意，我已經改變了提交按鈕的id。您不應將表單元素作爲表單屬性的名稱。

中查看選項的jQuery $().animate() API：http://api.jquery.com/animate/

來源

2010-09-18 11:28:03 lonesomeday

謝謝你，就像一個魅力。現在我們來簡單地將動畫片段縮小一些，並將動畫放下。 – FabienO 2010-09-18 11:43:36

你或許應該使用AJAX對於這種類型的事情，但如果你真的想：

document.getElementById('submit').addEventListener('click', function(e) { 
    e.preventDefault(); 
    setTimeout(function() { 
     document.getElementById('login_form').submit(); 
    }, 3500); 
}, false);

來源

2010-09-18 10:51:39

我認爲這是更好地使用.submit（FNC）然後。點擊 - 據我所知應該也工作在輸入
使用event.preventDefault（），然後自己提交當動畫完成

來源

2010-09-18 10:53:15 NoxArt

上提交延遲頁變化 - jQuery的

回答

相關問題