jQuery animate() deselects text in Firefox

Question

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 done 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!

Answer 1

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();
     });
});