jquery - 我想以它自己的特定 div 为表单设置动画

Question

我想在那个特定的 div 中消失我的表单，但是我的表单在整个浏览器宽度中移动......请帮助我..

css

#div {
    position : relative;
    width:500px;
    height:300px;
    background-color:#888;
    margin-left:25%;
    text-align : center;
    padding:5%;
    margin-top:100px;
}
#main {
    position: absolute;
    border: 1px solid #ccc;
    padding: 5px;
    width: 300px;
    margin-left: 15%;
    border-top :10%;
}

js

$("document").ready(function(){
    $("#submit").click(function(){
        var name1 = $("#name").val();
        var email = $("#email").val();
        $("#main").animate({"left":"-=1000px"},"fast",function(){
            $(this).after("Thank you"+" "+ name1+"."+ "<br>" + "Your email is" + " " + email);
        });
    });
});

html

<div id="div">
    <div id="main">
        <h3>Personal Details</h3>
        Name<input type="text" style="margin-left:10%" id="name"/><br><br>
        Email<input type="text" style="margin-left:11%"id="email"/><br><br>
        <button id="submit">submit</button>
    </div>
</div>

Answer 1

您应该将包含表单的 div 的溢出属性设置为隐藏：

#div {
    position : relative;
    width:500px;
    height:300px;
    background-color:#888;
    margin-left:
    text-align : center;
    padding:5%;
    margin-top:100px;
    overflow: hidden;
}

这将隐藏任何超出您为 div 指定的尺寸的元素。

Answer 2

添加overflow: hidden到您的 div。

CSS

#div {
    ...
    overflow: hidden;
    ...
}

演示

编辑

看到这个

Answer 3

尝试这个：

$("document").ready(function () {
    $("#submit").click(function () {
        var name1 = $("#name").val();
        var email = $("#email").val();
        $("#div").animate({
            "left": "1000px"
        }, "fast", function () {
            $(this).after("Thank you" + " " + name1 + "." + "<br>" + "Your email is" + " " + email);
            $(this).css("display", "none");
        });
    });
});

#main完成向左滑动后会消失。

这是小提琴。