3

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.

mwright
  • 4,099
  • 7
  • 30
  • 40

2 Answers2

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.

naugtur
  • 16,827
  • 5
  • 70
  • 113
  • Your problem was made by Microsoft. When You modify border the textbox is a rectangle rendered by the browser instead of the default system control. New Windows(r) with all the glow effects etc. wasn't expecting animating it without directX usage :P – naugtur Feb 26 '10 at 21:02
0

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

Siedrix
  • 641
  • 4
  • 10
  • I tried this but the effect is still visible, I added links so that you can see what I'm talking about. – mwright Feb 26 '10 at 00:20