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;博士

  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 频道中的冷头回答如下：http: //jsfiddle.net/d9AfJ/7/

于 2012-09-04T05:59:51.257 回答