如何在不暂时隐藏背景图像的情况下使用"突出显示"jquery效果？

Question

我试图在输入html元素上使用jquery ui"highlight"效果,并在CSS(带放大镜的搜索栏)中设置背景图像.然而,在"高亮"动画期间,背景图像暂时消失,然后在高亮动画结束后出现.我希望图像能够保留在整个动画中.有任何想法吗？

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;

}

Answer 1

添加!important到您的CSS,像这样:

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

小心使用.

Answer 2

我深入研究了JQuery UI的高亮代码,我认为第4583行是你的问题:

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

您可以将此函数的副本更改为更像这样:

el.css({backgroundColor: color});

Answer 3

当调用highlight时，源将backgroundImage设置为“none”，我不知道如何配置它。您始终可以创建自己的突出显示效果，而无需删除背景图像（我已经这样做了，只需复制/粘贴原始图像并更改一个 .css() 调用）。

您可以做的另一件事（尽管不是那么干净）是：

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

会有一个间隙，但这会在高亮动画开始后立即将背景图像放回原位。