Jak używać efektu jQuery "highlight" bez tymczasowego ukrywania obrazu tła?

Question

Próbuję użyć efektu "highlight" jquery ui na wejściowym html z obrazem tła ustawionym w CSS (pasek wyszukiwania z lupą). Podczas animacji "podświetlenia" obraz tła tymczasowo znika, a następnie pojawia się po zakończeniu animacji podświetlenia. Chciałbym, aby obraz pozostał w trakcie animacji. Jakieś pomysły?

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

Po wywołaniu podświetlenia źródło ustawia obraz tła na "brak" i nie wiem, jak to skonfigurować. Zawsze możesz stworzyć własny efekt podkreślenia i po prostu nie usunąć backgroundImage (zrobiłem to, po prostu skopiuj/wklej oryginał i zmień jedno wywołanie .css()).

Inną rzeczą, jaką możesz zrobić, chociaż nie jest tak czysty, to:

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

Nie będzie przerwa, ale to będzie można umieścić obraz tła na miejsce zaraz po animacja kulminacyjnym rozpoczęła.

Answer 2

można dodać przezroczysty kanał alfa koloru podświetlenia? Nie znam się dobrze na CSS, ale wydaje mi się, że to miejsce do sprawdzenia.

W przeciwnym razie można by po prostu zastąpić obraz bg wersją, która została podświetlona i nie podświetlać wcale tego pola?

Answer 3

ja wykutych w kodzie kulminacyjnym JQuery UI i myślę, że linia # 4583 jest twój problem:

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

Można zmienić kopię tej funkcji, aby wyglądać bardziej jak to:

el.css({backgroundColor: color}); 

Answer 4

Dodaj !important do CSS coś takiego:

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

Używaj ostrożnie.