Анимация Inpupt Box в jQuery оставляет «след», есть ли способ от него избавиться? - PullRequest
3 голосов
/ 26 февраля 2010

Использование jQuery для анимации текстового поля ASP.net, когда оно сфокусировано, оставляет в Firefox 3.5 конечную анимацию.

Эффект больше не виден после изменения поля ввода, чтобы не было рамки. Верхний блок не имеет границы и не имеет конечной анимации, а нижний блок с рамкой по-прежнему содержит конечную анимацию.

jQuery выглядит следующим образом:

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

Содержимое тела:

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

Есть ли способ избавиться от конечной анимации при расширении текстового поля? Немного помогает анимация «быстро», гораздо хуже, когда анимация медленная. Проблема значительно усугубляется при наличии цвета.

Заранее спасибо.

Это не то, что можно увидеть в Internet Explorer 8, Chrome или Opera.

Ответы [ 2 ]

2 голосов
/ 26 февраля 2010

Я использую Firefox в Linux, и он отлично работает. Речь идет о системе рендеринга полей. попробуйте определить границы и фон полей в CSS, чтобы они отображались плоскими, и посмотрите, изменит ли это что-либо.

Спросите больше людей, видят ли они проблему. Я не знаю.

0 голосов
/ 26 февраля 2010

Вы можете использовать функцию остановки

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

Это остановит событие и затем оживит до новой ширины

...