L'animation de la boîte InPupt dans jQuery laisse une "trace", un moyen de s'en débarrasser?

Question

L'utilisation de jQuery pour animer une zone de texte ASP.net lorsqu'elle est focalisée laisse une animation de fin dans Firefox 3.5.

L'effet n'est plus visible après la modification de la zone de saisie pour ne pas avoir de bordure. La boîte du haut n'a pas de bordure et n'a pas d'animation de fin, tandis que la boîte du bas avec une bordure a toujours une animation de fin.

jQuery est la suivante:

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

Contenu du corps sont:

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

Est-il possible de se débarrasser de l'animation de fin comme la zone de texte est étendu? L'animation "rapide" aide un petit peu, c'est bien pire en animation lente. Le problème devient nettement pire quand il y a la couleur impliquée.

Merci d'avance.

Ce n'est pas quelque chose qui peut être vu dans Internet Explorer 8, Chrome ou Opera.

Answer 1

J'utilise Firefox sur Linux et il fonctionne parfaitement. Il s'agit de rendre les champs dans le système. essayez de définir la bordure et l'arrière-plan des champs en CSS afin qu'ils soient rendus plats et voir si cela change quelque chose.

Demandez à plus de gens s'ils voient le problème. Je ne.

Answer 2

Vous pouvez utiliser la fonction d'arrêt

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

Il arrêtera l'événement, puis animer la nouvelle largeur