在jQuery登录脚本中重构动画_Jquery_Optimization_Animation_Content Management System_Login

在jQuery登录脚本中重构动画

jquery optimization animation content-management-system login

在jQuery登录脚本中重构动画,jquery,optimization,animation,content-management-system,login,Jquery,Optimization,Animation,Content Management System,Login,我正在使用jQuery为CMS中的登录表单构建简单的动画。jQuery切换两个表单的可见性：登录表单和重置密码表单这个脚本工作得非常好，但我似乎知道如何缩短它，因为大部分代码都是冗余的注意：.click函数在每种情况下调用两次，以强制同时进行动画 JS： $(function() { var recover_text = "Password Recovery"; var login_text = "Login to CMS"; $("input").labelify(

我正在使用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:


…登录字段。。。
…重置密码字段。。。
#pw_recover{display:none；}

如何优化/重新配置此脚本？有什么想法吗

像这样的

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

像这样的

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

您可以通过在animate命令（

animate（）

，

fadeIn（）

等）后调用，强制同时进行动画

-底部的代码

当然，这个演示有些做作，因为我们可以在一个animate命令中设置高度和宽度的动画：）

编辑：

对于

'#login'

和

'#遗忘'

中的每一个，您只需要一个

click（）

命令，动画就可以同时工作，如下面的演示所示-

因此，您可以将代码重构为以下内容

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

然后，您可以查看重构您在每个单击事件处理程序中所做的事情，即代码中有一个可以抽象的模式。有很多方法可以做到这一点，其中两种是

以中建议的方式

为它编写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


沙箱
#div{背景色：红色；高度：100px；宽度：100px；}
这是动画版