Come utilizzare l'effetto jQuery "evidenziato" senza nascondere temporaneamente l'immagine di sfondo?

Question

Sto tentando di utilizzare l'effetto "highlight" di jquery ui su un elemento html di input con un'immagine di sfondo impostata nel CSS (una barra di ricerca con una lente d'ingrandimento). Durante l'animazione "highlight", tuttavia, l'immagine di sfondo scompare temporaneamente e quindi appare una volta terminata l'animazione di evidenziazione. Vorrei che l'immagine rimanesse durante l'animazione. Qualche idea?

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

Quando viene richiamata l'evidenziazione, la sorgente imposta lo sfondoImmagine su "nessuno" e non conosco un modo per configurarlo. Puoi sempre creare il tuo effetto highlight e semplicemente non rimuovere lo sfondoImage (l'ho fatto, basta copiare/incollare l'originale e cambiare una chiamata .css()).

Un'altra cosa che si può fare, anche se non è il più pulito è:

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

Ci sarà un gap, ma questo metterà l'immagine di sfondo al suo posto subito dopo l'animazione clou è iniziata.

Answer 2

si può aggiungere un canale alfa trasparente per il colore di evidenziazione? Non ho molta familiarità con i CSS, ma mi sembra il posto da controllare.

Altrimenti, potresti semplicemente sostituire l'immagine di bg con una versione che hai fatto apparire evidenziata e non evidenziare il riquadro?

Answer 3

ho scavato nel codice clou della JQuery UI, e penso che la linea # 4583 è il tuo problema:

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

Si potrebbe cambiare la vostra copia di questa funzione per guardare più in questo modo:

el.css({backgroundColor: color}); 

Answer 4

Aggiungi !important al CSS, in questo modo:

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

Usare con cura.