jQuery 代码故障

Question

我正在 build 我的网站，但我遇到了一些问题......对于登陆页面，我想做一个你必须输入 PW 才能进入的东西，所以我有一个文本输入，旁边有两个宽度为 50% 的 div，一个向左浮动，另一个向右浮动。

我想要它，以便在输入 PW 并输入 RETURN 键时，输入会淡化，并且它后面的 div 会滑到各自的侧面。

这很好用。但是，当我随后单击“关闭”按钮时，我希望这两个 div 滑回并返回到它们的原始位置。好吧，我在 CodePen 上试过了并且工作正常，但是当我将它迁移到 my site 时它有点疯狂。这是 repository for my website .

html:

<div class="input-div">
    <i class="fa fa-lock" aria-hidden="true"></i>   
        <input id="secret" type="password" />
    </div>
    <div class="container">
    <div class="left to-hide"></div>
    <div class="right to-hide"></div>
</div>

<div class="container2">
    <button>Close</button>
</div>

CSS:

html, body {
    width:100%;
    height:100%;
}

.container {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
}

.left {
    width:50%;
    height:100%;
    background-color:#222;
    float:left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 1px solid #111;
}

.right {
    width:50%;
    height:100%;
    background-color:#222;
    float:right;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 1px solid #111;
}

.input-div {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    z-index:99;
}

input {
    width:300px;
    height:50px;    
    font-size:3em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin:10px;
    text-align:center;
}

.fa-lock {
    font-size:3em;
    color:white; 
}

.container2 {
    background-color:crimson;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

button {
    width:100px;
    height:50px;
}

和 jQuery:

$('.right , .left').show();

$(function() {
    $('input').keypress(function(e) {
        if (e.keyCode == 13) {
            if (!$(this).val()) { //if it is blank. 
                alert('Denied');
            } else {
                $('.input-div').fadeOut();
                $('.to-hide').animate({
                        width: "0"
                    },
                    1000,
                    function() {
                        $('.container').hide();
                    });
            }
        }
    });
});

$('button').click(function() {
    $('.container').show();
    $('.input-div').fadeIn(1500);
    $('.to-hide').animate({width: "50%" }, 1000, function() {});
});

Answer 1

在您的存储库中，您在 show() 方法上调用了一个函数，这就是造成 div 看起来像是从左上角滑动的效果的原因。

您需要在您的网站 script.js 上执行此操作:

$('button').click(function() {
    $('.container-b').show();
    $('.input-div').fadeIn(1500);
    $('.to-hide').animate({width: "50%" }, 1000);
});

代替

$('button').click(function() {
    $('.container-b').show(function(){


        $('.to-hide').animate({width: "50%" }, 1000, function() {

            $('.input-div').fadeIn(1500);

        });
    });
});

这是一个代码笔示例:CodePen