Animation de refactoring dans le script de connexion jQuery

Question

J'utilise jQuery pour créer des animations simples pour un formulaire de connexion dans mon CMS. Le jQuery bascule la visibilité de deux formulaires, un formulaire de connexion et un formulaire de réinitialisation du mot de passe.

Le script fonctionne parfaitement bien, mais il me semble trouver comment le raccourcir, car la majeure partie du code est redondante.

Remarque: La fonction .click est appelée deux fois dans chaque cas pour forcer les animations à se produire simultanément.

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

Et le (abrégé) 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; } 

Comment puis-je optimiser/rééquiper ce script? Des pensées?

Answer 1

quelque chose comme ça?

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

Vous pouvez forcer des animations à avoir lieu en même temps en appelant dequeue() après une la commande Animer (animate(), fadeIn(), etc.).

Working Demo - code au bas

Bien sûr, cette démo est un peu artificielle que nous aurions pu animé à la fois la hauteur et la largeur dans une commande Animer :)

EDIT :

Vous ne devez utiliser qu'une seule commande click() pour chacun des '#login' et '#forgot' pour les animations en même temps que de travailler la démonstration suivante spectacles-

Working Demo

Ainsi, vous pouvez factoriser votre code à ce qui suit pour commencer

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

Vous pouvez alors regarder refactoring de ce que vous faites dans chaque gestionnaire d'événement click, c'est-à-dire qu'il y a un pattern pour le code qui pourrait être abstrait. Il y a un certain nombre de façons que cela pourrait se faire, dont deux sont

1. de façon, comme suggéré dans Stobor's answer

2. écrire un plugin jQuery pour elle

Code jQuery pour démonstration

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