jQuery animate() deselects text in Firefox

Here's the code:

$("#textyt:input").focus(function() {
 $(this).animate({width:"545px"},500).css("color","#614A3E");
 $(this).select();
 $(this).mouseup(function(e){
  e.preventDefault();
 });
});

If I take away the animate effect, this focus event selects the text (as I'd like). With the animate effect, the text deselects when the animation is d开发者_C百科one in Firefox. This works fine in Safari as is. Is there any way to ensure the text is still selected when the animation finishes in FF? Thanks!

Try using:

 this.focus();
 this.select();

after the animation.

That would select the text after the animation completes. The width animation works by dynamically changing the CSS width property, and might lose focus in firefox, but what might be a better idea would be to change the width of an container element, not the actual textarea.

$("#textyt:input").focus(function() {
    $(this).animate(
        {width:"545px"}, 500, function(){
            this.focus();
            this.select();
        }).css("color","#614A3E");
     $(this).select();
     $(this).mouseup(function(e){
         e.preventDefault();
     });
});