jquery - 表单与 JQuery 动画冲突

Question

我有一个 div ( id="right") ，其中包含一个带有提交按钮的表单。单击提交后，div 应减小其宽度。当我从我的 HTML 中删除<form>标签时工作正常，但当表单存在时不起作用。怎么来的？

HTML：

<div id="right">
    <form method="POST" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
        ... some input fields here ...
        <input id = "btnRight" type="submit" value="Submit">            
    </form>
</div>

CSS：

#right {
    width: 50%;
    min-width: 35px;
    float: right;
    margin: 0;
    position: relative;
    overflow: hidden;
}

查询：

$(document).ready( function(){
    $('#btnRight').click(function () {
        $('#right').animate({ width: '3%' }, 'slow');   
    });
});  

任何帮助深表感谢！

Answer 1

添加preventDefault()

如果调用该方法，则不会触发事件的默认动作。

$(document).ready( function(){
    $('#btnRight').click(function (e) {
    e.preventDefault()
        $('#right').animate({ width: '3%' }, 'slow');   
    });
});  

在这里演示

Answer 2

对事件使用 preventDefault 函数，它将取消默认的“提交”事件：

$(document).ready( function(){
    $('#btnRight').click(function (e) {
        e.preventDefault();
        $('#right').animate({ width: '3%' }, 'slow');   
    });
});