在jQuery中的Inpupt框動畫留下了一個「痕跡」，任何方式擺脫它？

使用jQuery在焦點集中時爲ASP.net文本框設置動畫效果，並在Firefox 3.5中留下尾隨動畫。在jQuery中的Inpupt框動畫留下了一個「痕跡」，任何方式擺脫它？

將輸入框修改爲沒有邊框後，效果不再可見。頂框沒有邊框，沒有拖尾動畫，而帶邊框的底框仍然有尾隨動畫。

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中可以看到的東西。

來源

2010-02-25 mwright

我想它是瀏覽器/操作系統特定的。你可以在線添加一個演示鏈接嗎？我會檢查出來。 – naugtur

我使用的Firefox在Linux和它完美的作品。這是關於系統渲染字段。嘗試在CSS中定義字段的邊框和背景，以使它們變得平整，並查看它是否會改變任何內容。

問他們是否有問題。我不。

來源

2010-02-26 17:38:16 naugtur

修改邊框的工作。 – mwright

您的問題由Microsoft提出。當您修改邊框時，文本框是由瀏覽器呈現的矩形，而不是默認的系統控件。具有所有發光效果等的新Windows（r）並不期望在沒有directX使用的情況下進行動畫處理：P – naugtur

可以使用停止功能

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

它將停止該事件，然後以動畫的新寬度

來源

2010-02-26 00:01:11 Siedrix

我試過了，但效果仍然可見，我添加了鏈接，以便您可以看到我在說什麼。 – mwright

在jQuery中的Inpupt框動畫留下了一個「痕跡」，任何方式擺脫它？

回答

相關問題