我如何使用“突出显示" jQuery的效果而没有暂时隐藏背景图像? [英] How do I use the "highlight" jquery effect without temporarily hiding the background-image?

问题描述

我正在尝试在具有在CSS(带有放大镜的搜索栏)中设置背景图像的输入html元素上使用jQuery ui"highlight"效果.但是，在突出显示"动画期间，背景图像会暂时消失，一旦突出显示动画结束，背景图像就会出现.我希望图像在整个动画过程中保持不变.有什么想法吗?

I am trying to use the jquery ui "highlight" effect on an input html element with a background image set in the CSS (A search bar with a magnifying glass). During the "highlight" animation, however, the background image temporarily goes away and then appears once the highlight animation is over. I would like the image to remain throughout the animation. Any ideas?

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;

}

推荐答案

调用高亮显示时，源将backgroundImage设置为"none"，我不知道一种配置方法.您总是可以创建自己的突出显示效果，而不必删除backgroundImage(我已经做到了，只需复制/粘贴原始图像并更改一个.css()调用).

When highlight is called, the source sets the backgroundImage to 'none', and I don't know of a way to configure that. You can always create your own highlight effect and simply not remove the backgroundImage(I've done this, just copy/paste the original and change one .css() call).

您还可以做的另一件事，尽管它不那么干净:

Another thing you can do, although it isn't as clean is:

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

会有间隙，但是这会在突出显示动画开始后立即将背景图像放回原处.

There will be a gap, but this will put the background image back in place right after the highlight animation has started.

这篇关于我如何使用“突出显示" jQuery的效果而没有暂时隐藏背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！