How do I use the "highlight" jquery effect without temporarily hiding the background-image?

Question

Hello All,

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;

}

Answer 1

Can you add a transparent alpha channel to the highlight color? I'm not really familiar with CSS, but that would seem like the place to check.

Otherwise, could you just replace the bg image with a version you made that appears highlighted and not highlight the box at all?

Answer 2

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.

Answer 3

I dug into the highlight code of JQuery UI, and I think line #4583 is your problem:

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

You could change your copy of this function to look more like this:

el.css({backgroundColor: color});