JQuery's inpupt box animation leaves a mark, is there any way to get rid of it?

Question

Using jQuery to animate an ASP.net text field when it is focused leaves trailing animations in Firefox 3.5.

The effect is no longer visible after changing the input field so as not to have a border. The top box has no border and no final animation, and the bottom box with the frame still has the final animation.

jQuery looks like this:

$(document).ready(function(){
    $("input").focus(function(){
        $(this).animate({width:"500px"}, "fast")
    }).blur(function(){
        $(this).animate({width:"200px"}, "fast")
    });
 });  

Body content:

<form runat="server">
<div>
<p><asp:TextBox width="200px" runat="server"/></p>
<p><asp:TextBox width="200px" runat="server"/></p>
</div>
</form>

Is there a way to get rid of trailing animation as the text field expands? Animation "fast" helps a little, it is much worse when the animation is slow. The problem gets much worse when there is color.

Thanks in advance.

This is not what can be seen in Internet Explorer 8, Chrome, or Opera.

Answer 1

firefox Linux, . , . CSS, , - .

, . .

Answer 2

$(document).ready(function(){
    $("input").focus(function(){
        $(this).stop().animate({width:"500px"}, "fast")
    }).blur(function(){
        $(this).stop().animate({width:"200px"}, "fast")
    });
 }); 

,