Inpupt box animation in jQuery leaves a “trail”, any way to get rid of it?

Question

Using jQuery to animate a ASP.net textbox when it's focused leaves a trailing animation in Firefox 3.5.

The effect is no longer visible after modifying the input box to have no border. The top box has no border and has no trailing animation, while the bottom box with a border still has a trailing animation.

jQuery is as follows:

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

Contents of the body are:

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

Is there any way to get rid of the trailing animation as the textbox is expanded? Animating "fast" helps a little bit, it's much worse when animating slow. The problem gets significantly worse when there is color involved.

Thanks in advance.

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

Answer 1

I'm using firefox on Linux and it works perfectly. It's about system rendering the fields. try defining the border and background of the fields in CSS so that they'll be rendered flat and see if it changes anything.

Ask more people if they see the problem. I don't.

Answer 2

You can use the stop function

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

It will stop the event and then animate to the new width