jQuery中的输入框动画留下了“痕迹”，有什么办法可以摆脱它？答案

【问题标题】：Inpupt box animation in jQuery leaves a "trail", any way to get rid of it?jQuery中的输入框动画留下了“痕迹”，有什么办法可以摆脱它？
【发布时间】：2010-02-25 22:11:57
【问题描述】：

当 ASP.net 文本框获得焦点时，使用 jQuery 为其设置动画会在 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 中是看不到的。

【问题讨论】：

我想它是特定于浏览器/操作系统的。您可以添加在线演示的链接吗？我会检查一下。

标签： jquery asp.net firefox3.5

【解决方案1】：

我在 Linux 上使用 firefox，它运行良好。这是关于系统渲染字段的。尝试在 CSS 中定义字段的边框和背景，以便将它们呈现为平面并查看它是否会改变任何内容。

询问更多人是否发现问题。我没有。

【讨论】：

您的问题是由 Microsoft 造成的。当您修改边框时，文本框是由浏览器而不是默认系统控件呈现的矩形。具有所有发光效果等的新 Windows(r) 并没有期望在没有使用 directX 的情况下对其进行动画处理：P

【解决方案2】：

你可以使用停止功能

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

它会停止事件，然后动画到新的宽度

【讨论】：

我试过这个但是效果还是可以看到的，我添加了链接让你可以看到我在说什么。