我想在自己的特定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的overflow属性设置为隐藏：

#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;
    ...
}

Demo

修改

See this

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将消失。

这是 fiddle。