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时，source将backgroundImage设置为'none'，我不知道配置它的方法。你总是可以创建自己的高亮效果，而不是删除backgroundImage（我已经完成了这个，只需复制/粘贴原始文件并更改一个.css（）调用）。

你可以做的另一件事，虽然不是那么干净：

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

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

Answer 4

您可以为高亮颜色添加透明Alpha通道吗？我对CSS并不熟悉，但这似乎是值得检查的地方。

否则，您是否可以使用突出显示的版本替换bg图像，而不是突出显示该框？

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

4 个答案: