如何在不暫時隱藏背景圖像的情況下使用「突出顯示」jquery效果？

我想在CSS（具有放大鏡的搜索欄）中設置背景圖像的輸入html元素上使用jquery ui「highlight」效果。然而，在「高光」動畫中，背景圖像暫時消失，然後在高光動畫結束後出現。我希望圖像在整個動畫中保持不變。有任何想法嗎？如何在不暫時隱藏背景圖像的情況下使用「突出顯示」jquery效果？

HTML：

<input class="searchInput" id='searchInputWithMap' type="text" tabindex="100" name="searchStructures" />

CSS：

.searchInput { 

font-family:Trebuchet MS,Helvetica,sans-serif; 
background:transparent url(/images/search4.png) no-repeat scroll 8px 6px; 
height:22px; 
line-height:28px; 
padding-left:32px; 
padding-right:3px; 
padding-top:5px; 
padding-bottom:5px; 
margin:5px 0; 
border:1px solid #999999; 
font-size:130%; 
height: 32px; 
width: 400px; 
vertical-align:center; 
    color:#BBBBBB; 

}

來源

2009-11-13 CodingWithoutComments

當突出顯示被調用時，源代碼將backgroundImage設置爲'none'，但我不知道如何配置它。您可以隨時創建自己的突出顯示效果，並且不會刪除backgroundImage（我已經完成了該操作，只需複製/粘貼原始內容並更改一個.css（）調用）即可。

另一件事可以做，但它並不像清潔是：

$("#searchInputWithMap").click(function() { 
    $(this).effect("highlight", {}, 3000); 
    $(this).css('backgroundImage','url(/images/search4.png)'); 
});

將有一定的差距，但是這將會把背景圖像放回原處亮點動畫已經開始之後。

來源

2009-11-13 21:19:04 ryanday

很棒的傢伙。謝謝。 – CodingWithoutComments

嗯，我無法得到這個工作 –

你可以添加一個透明的Alpha通道將高亮顏色？我對CSS不太熟悉，但看起來就像是要檢查的地方。

否則，您可以用您製作的高亮顯示的圖像替換bg圖像，而不是突出顯示該圖像框？

來源

2009-11-13 20:48:02 Zak

我挖成的JQuery UI重頭戲碼，我覺得行＃4583是你的問題：

el.css({backgroundImage: 'none', backgroundColor: color});

你可以改變你這個函數的副本看起來更像是這樣的：

el.css({backgroundColor: color});

來源

2009-11-13 21:21:18

也是一個很好的答案。 thxxx。 – CodingWithoutComments

如果你不想讓背景圖像重複並保持突出顯示，那就走。 –

添加!important您CSS，像這樣：

.searchInput { background-image:url(/images/search4.png) !important; }

小心使用。

來源

2012-04-13 02:18:59 Noisyjerm

儘可能少的開銷。太好了！ – Odys

如何在不暫時隱藏背景圖像的情況下使用「突出顯示」jquery效果？

回答

相關問題