Refactoring Animationen in jQuery Login-Skript

Question

Ich benutze jQuery, um einfache Animationen für ein Login-Formular in meinem CMS zu erstellen. JQuery schaltet die Sichtbarkeit von zwei Formularen, einem Login-Formular und einem Reset-Passwort-Formular um.

Das Skript funktioniert einwandfrei, aber ich finde, wie man es verkürzen kann, da der meiste Code redundant ist.

Hinweis: Die Funktion .click wird jeweils zweimal aufgerufen, um zu erzwingen, dass die Animationen gleichzeitig stattfinden.

Die 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 + ''; 
    }); 
}); 

Und die (gekürzte) 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; } 

Wie kann ich optimieren/dieses Skript umrüsten? Irgendwelche Gedanken?

Answer 1

so etwas wie das?

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

Answer 2

können Sie Animationen zwingen stattzufinden gleichzeitig von dequeue() nach einem Beseeltem Befehl aufrufen (animate(), fadeIn(), etc).

Working Demo - -Code am unteren

Natürlich ist diese Demo etwas gekünstelt, wie wir die Höhe und die Breite in der einem belebten Befehl animiert haben könnten :)

EDIT :

Sie sollten nur einen click() Befehl für jeden vonbenötigenund '#forgot' für die Animationen gleichzeitig wie die folgende Demo shows-

Working Demo

So können Sie Ihren Code auf die folgende Refactoring

$("#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 + ''; 
}); 

Sie arbeiten dann aussehen könnte beginnen bei Refactoring, was Sie in jedem Click-Event-Handler tun, dh es gibt ein Muster für den Code, der abstrahiert werden könnte. Es gibt eine Reihe von Möglichkeiten, wie dies geschehen könnte, von denen zwei

1. in einer Art und Weise ist, wie vorgeschlagen in Stobor's answer

2. schreibt eine jQuery-Plugin für sie

jQuery-Code für Demo

$(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>