在jQuery登錄腳本中重構動畫

我使用jQuery爲CMS中的登錄表單構建簡單的動畫。 jQuery切換兩種形式，登錄表單和重置密碼錶單的可見性。在jQuery登錄腳本中重構動畫

該腳本工作得很好，但我似乎想出如何縮短它，因爲大部分代碼是多餘的。

注：.click函數在每種情況下被調用兩次以強制動畫同時發生。

的JS：

$(function() { 
    var recover_text = "Password Recovery"; 
    var login_text = "Login to CMS"; 
    $("input").labelify({ text: "label", labelledClass: "inside" }); 
    $("#forgot").click(function() { 
     $("#cms_login").fadeOut("fast", function() { 
      $("#pw_recover").fadeIn(); 
     }); 
    }); 
    $("#forgot").click(function() {  
     $("#dialog h2").fadeOut("fast", function() { 
      $(this).html("" + recover_text + "").fadeIn(); 
     }); 
     document.title = '' + recover_text + ''; 
    });  
    $("#login").click(function() { 
     $("#pw_recover").fadeOut("fast", function() { 
      $("#cms_login").fadeIn(); 
     }); 
    }); 
    $("#login").click(function() {  
     $("#dialog h2").fadeOut("fast", function() { 
      $(this).html("" + login_text + "").fadeIn(); 
     }); 
     document.title = '' + login_text + ''; 
    }); 
});

而且（有刪節）HTML：

<div id="form-wrap"> 
    <form id="cms_login"> 
     ...login fields... 
     <a id="forgot" href="#">Forgot password?</a> 
    </form> 
    <form id="pw_recover"> 
     ...reset password fields... 
     <a id="login" href="#">⇐ Back to login</a> 
    </form> 
</div> 

#pw_recover { display: none; }

如何優化/重新裝備這個腳本？有什麼想法嗎？

來源

2009-07-24 peehskcalba

這樣的事情？

$(function() { 
    function switch_boxes(out, in_str) 
    { 
     return function() { 
      $(out).fadeOut("fast", function() { 
        $(in_str).fadeIn(); 
       }); 
     }; 
    } 
    function switch_text(out, text) 
    { 
     return function() { 
      $(out).fadeOut("fast", function() { 
        $(this).html(text).fadeIn(); 
       }); 
      document.title = '' + text + ''; 
     }; 
    } 

    var recover_text = "Password Recovery"; 
    var login_text = "Login to CMS"; 
    $("input").labelify({ text: "label", labelledClass: "inside" }); 
    $("#forgot").click(switch_boxes("#cms_login", "#pw_recover")); 
    $("#forgot").click(switch_text("#dialog h2", recover_text)); 
    $("#login").click(switch_boxes("#pw_recover", "#cms_login")); 
    $("#login").click(switch_text("#dialog h2", login_text)); 
});

來源

2009-07-24 08:27:57 Stobor

太棒了！現在，在哪裏插入`return false`以防止頁面跳到頂部？ – peehskcalba 2009-07-24 17:35:31

您可以同時通過該動畫命令（animate()，fadeIn()等）後調用dequeue()迫使動畫發生。

Working Demo - 底部

當然代碼，這個演示是有點做作，因爲我們本來可以在動畫的一個動畫命令:)

編輯高度和寬度：

您應該只需要一個click()命令爲每個'#login'和'#forgot'的動畫爲下面的演示同時工作shows-

Working Demo

因此，你可以重構你的代碼下面開始

$("#forgot").click(function() { $("#cms_login").fadeOut("fast", function() { $("#pw_recover").fadeIn(); }); $("#dialog h2").fadeOut("fast", function() { $(this).html("" + recover_text + "").fadeIn(); }); document.title = '' + recover_text + ''; }); $("#forgot").click(function() { }); $("#login").click(function() { $("#pw_recover").fadeOut("fast", function() { $("#cms_login").fadeIn(); }); $("#dialog h2").fadeOut("fast", function() { $(this).html("" + login_text + "").fadeIn(); }); document.title = '' + login_text + ''; });

然後你可以看一下重構每個點擊事件處理程序中你正在做的事情，即可能抽象出的代碼模式。有許多方法是可以這樣做，其中兩個是

在時尚
在Stobor's answer

建議寫一個jQuery插件，它

jQuery代碼用於演示

$(function() { $('#dequeue').click(function() { $('#div') .animate({ height: 200}, "slow") .dequeue() .animate({ width: 200}, "slow"); }); $('#queue').click(function() { $('#div') .animate({ height: 100}, "slow") .animate({ width: 100}, "slow"); }); });

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Sandbox</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> #div { background-color: red; height: 100px; width: 100px; } </style> </head> <body> <div id="div"> This is the animated div </div> <br/> <input type="button" id="dequeue" value="Click Me to expand (dequeued)" /> <br/> <input type="button" id="queue" value="Click Me to contract (queued)" /> </body> </html>

來源

2009-07-24 08:33:34

也感謝您的意見。 `.dequeue（）`提示是我會記得的！ – peehskcalba 2009-07-24 16:33:04

在jQuery登錄腳本中重構動畫

回答

相關問題