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 can be seen here or here with .stop() added, both exhibit the effect.

The effect is no longer visible after modifying the input box to have no border, this can be seen here. 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

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

Answer 2

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.