Question

我有一个登录表单和一个注册＆＃39;注册＆＃39;表格下面的标题。当用户点击＆＃39;注册＆＃39;链接，登录淡出和注册表单淡入。我使用以下脚本：

  $("#loginArea").fadeOut(2000, function () {
                        $("#RegisterArea").fadeIn(2000, function () { 
                        $("#RegisterArea").empty().append(mydata); });
                        //$("#RegisterArea").empty().
                    });

使用上面的代码，登录表单淡出，但是对于regsiter表单淡入不起作用，只是把'mydata＆＃39;内容在＆＃39; RegisterArea＆＃39;没有动画。

你能帮助我吗？

Answer 1

我想你可能想这样做：

$("#loginArea").fadeOut(2000, function () {
    $("#RegisterArea").empty().hide().append(mydata);
    $("#RegisterArea").fadeIn(2000);
});

如果淡入时注册区域为空，则无法看到它，因此首先用内容填充它，然后将其淡入：）

Answer 2

对我来说似乎工作正常。看这个演示：

http://jsfiddle.net/UDdZ9/

您是否有可能最初隐藏#RegisterArea？或者您用来选择对象的ID是不正确的（它们与底层HTML不匹配）？我在使演示正常工作的同时遇到了这些问题。

最初要隐藏#RegisterArea，您可以使用the jQuery .hide method，也可以将CSS中的样式设置为display:none。

如果这没有帮助，您可能想尝试在chrome中运行它，打开脚本控制台，看看您是否在页面上收到了脚本错误。要打开脚本控制台 F12 ，请单击窗口左下角的Show Console按钮。

以下是我使用您的代码制作的演示的工作代码。

HTML：

<div id="loginArea">
    <a id="register">Click me to register</a>
</div>
<div id="RegisterArea">
</div>

CSS：

#loginArea {
    background:grey;
}

#RegisterArea {
    width:50px;
    height:50px;
    background:green;
    display:none;
}

JS：

$("#register").click(function() {
    $("#loginArea").fadeOut(2000, function() {
        $("#RegisterArea").fadeIn(2000, function() {
            var mydata = "test123";
            $("#RegisterArea").empty().append(mydata);
        });
    });
});

淡出一些区域，淡入另一个区域

2 个答案: