jquery - JQuery アニメーションと競合するフォーム

Question

id="right"送信ボタンのあるフォームを保持するdiv ( ) があります。[送信] をクリックすると、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;
}

JQuery:

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

どんな助けでも大歓迎です！