javascript - 将一个元素滑入，同时将一个元素滑出？定位乱了？元素正在覆盖自己

Question

我刚刚收到一个关于一些 jQuery/CSS 放置的快速问题。我正在尝试实现找到的效果 here ，但是在我的 CSS 中，对象的放置完全是一团糟。我想我已经了解了这种情况，我似乎无法找到让我的 CSS 工作的方法。你有什么可以帮助的，我很想听听。提前致谢!

到目前为止我所有的东西都可以找到here .

JS:

function validate(form) {
var user = form.username.value;
var pass = form.password.value;

if(user === "test") {
    if(pass === "pass") {
        var hideoptions = {"direction" : "left",  "mode" : "hide"};
        var showoptions = {"direction" : "left", "mode" : "show"};

        $("#loginView").toggle("slide", hideoptions, 1000);
        $("#loginView2").toggle("slide", showoptions, 1000);
    } else {
        alert("nope");
    }
} else {
    alert("nope 2");
}

我所做的一切似乎都不起作用，我真的希望你能帮上忙!

Answer 1

我认为您在 fiddle 中犯的主要错误是“缺少激活 Jquery UI”。因为您在代码中提到的效果来自 UI Jquery。还有一些您在那里错过的登录功能。我修改并简化了您的代码，现在工作正常。在下面检查我的 fiddle 。

 $('.largeBtn').click(function(){  

if($('#username').val() == "test") {
    if($('#password').val() == "pass") {   
        var hideoptions = {  "direction" : "left",  "mode" : "hide"};
        var showoptions = {"direction" : "right","mode" : "show"};

        $("#loginView").toggle("slide", hideoptions, 1000);
        $("#loginView2").toggle("slide", showoptions, 1000);
    } else {
        alert("nope");
    }
} else {
    alert("nope 2");
}
});

Working JSFiddle Demo