0

開いたり閉じたりしたときにアニメーションを表示する単純なフォームがあります。

<html><head><style type="text/css">
#contactFormContainer
            {
                width:300px;
                margin-top:15px;
            }
            #contactForm
            {
                margin-top:15px;
                width:300px;
                border:solid 1px #4d3a24;
                display:none;
            }
            #contactForm fieldset
            {
                padding:20px;
                border:none;
            }      
            #contactForm label
            {
                display:block;
            }      
            #contactForm input[type=text]
            {
                display:block;
                border:solid 1px #4d3a24;
                width:100%;
                margin-bottom:10px;
                height:24px;
            }  
            #contactForm textarea
            {
                display:block;
                border:solid 1px #4d3a24;
                width:100%;
                margin-bottom:10px;
            }  
            #contactForm input[type=submit]
            {
                background-color:#4d3a24;
                border:solid 1px #23150c;
                color:#FFFFFF;
                padding:5px;
                cursor:pointer;
                float: right;
            }                
            #contactLink
            {
                height:15px;
                width:218px;
                background-image:url('../images/signup.png');
                cursor:pointer;
            }
            #messageSent
            {
                color:#bc0d1b;
                display:none;
            }
</style>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#contactLink").click(function(){
        if ($("#contactForm").is(":hidden")){
            $("#contactForm").slideDown("slow");
        }else{
            $("#contactForm").slideUp("slow");
        }
    });

});

function closeForm(){
    $("#messageSent").show("slow");
    setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
}
</script>

</head><body>



    <div id="contactFormContainer">
        <div id="contactLink"></div>
        <div id="contactForm">
            <form action="test2.php" enctype="multipart/form-data" method="post">
            <fieldset>
                <label for="name">Name *</label>
                <input id="name" type="text" name="name" />
                <label for="email">Email address *</label>
                <input id="email" type="text" name="email" />
                <input id="sendMail" type="submit" name="signupSubmit" />
                <span id="messageSent"></span>
            </fieldset>
            </form>
        </div>
    </div>



</body>
</html>

問題は、最初のフィールドセットの上に追加<form action="test2.php" enctype="multipart/form-data" method="post">してからフォームを閉じると...閉じるアニメーションが機能しなくなることです。

TL; DR

  1. [送信]をクリックすると、フォームが適切なアニメーションで閉じます
  2. <form>POSTを処理できるようにタグを追加します
  3. クロージングアニメーションは機能しなくなりました

なぜ、そしてどうすれば修正できますか？

4

2 に答える 2

1

フォームがある場合、ボタンを押すと、onclickではなくフォーム送信に変換されます。次のようにフォーム送信イベントをインターセプトする必要があります。

$("form").submit(function(event) { do animation here } )
于 2012-09-04T05:29:49.783 に答える
0

Freenodeの#jqueryチャネルのcoldheadは、次のように答えました：http: //jsfiddle.net/d9AfJ/7/

于 2012-09-04T05:59:51.257 に答える