Рефакторинг анимаций в сценарии входа в jQuery

Question

Я использую jQuery для создания простых анимаций для формы входа в мою CMS. 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; } 

Как оптимизировать/переоборудовать этот сценарий? Есть предположения?

Answer 1

что-то вроде этого?

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

Вы можете заставить анимацию происходить одновременно, вызвав dequeue() после команды одушевленной (animate(), fadeIn(), и т.д.).

Working Demo - код в нижних

Конечно, это демо несколько надуманный, как мы могли бы анимированные высоты и ширины в команде один живой :)

EDIT :

Для каждого извам потребуется только одна команда и '#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 + ''; 
}); 

Вы могли бы посмотреть на рефакторинг того, что вы делаете в каждом обработчике события клика, т. е. есть шаблон кода, который может быть абстрагирован. Есть несколько способов, что это может быть сделано, два из которых являются

1. в моде, как предложено в Stobor's answer

2. написать плагин 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>