-4

その特定の 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>
4

3 に答える 3

1

overflow: hiddendivに追加します。

CSS

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

デモ

編集

これを見る

于 2013-06-06T12:40:39.217 に答える
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 に指定したサイズの外側にある要素が非表示になります。

于 2013-06-06T12:39:15.593 に答える
1

これを試して：

$("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左にスライドし終わると消えます。

これがフィドルです。

于 2013-06-06T12:44:05.627 に答える