Question

我正在构建我的网站，我遇到了一些问题...对于着陆页我想做这个东西，你必须输入一个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示例：CodePen

jQuery代码故障

1 个答案: