Arka plan görüntüsünü geçici olarak gizlemeden "vurgu" jquery efektini nasıl kullanırım?

Question

Girdi html öğesindeki jquery ui "vurgulama" efektini CSS'de (arkaplan büyütme camı olan bir arama çubuğu) ayarlanmış bir arka plan görüntüsü ile kullanmaya çalışıyorum. Bununla birlikte, "vurgu" animasyonu sırasında, arka plan resmi geçici olarak gider ve vurgulama animasyonu bittiğinde görünür. Resmin animasyon boyunca kalmasını isterim. Herhangi bir fikir?

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

Vurgulu çağrıldığında kaynak, backgroundImage öğesini 'none' olarak ayarlar ve bunu yapılandırmanın bir yolunu bilmiyorum. Her zaman kendi vurgulama efektinizi oluşturabilir ve sadece backgroundImage'ı kaldıramazsınız (bunu yaptım, sadece orijinali kopyala/yapıştır ve bir .css() çağrısını değiştir).

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

bir açıklık olacaktır, ancak bu yerine geri vurgulamak animasyon başladıktan hemen sonra arka plan resmi koyacağız: Yapabileceğiniz

Başka bir şey, o kadar temiz olmasa da değildir.

Answer 2

vurgulama rengi şeffaf alfa kanalı ekleyebilir miyim? CSS'ye pek aşina değilim, ama kontrol edilecek yer gibi gözüküyor.

Aksi takdirde, bg görüntüsünü, vurgulanmış olarak beliren ve kutuyu vurgulamayan bir sürümle değiştirebilir miydiniz?

Answer 3

Ben JQuery UI vurgulamak koduna kazdık ve ben çizgi # 4583 senin sorunun olduğunu düşünüyorum:

el.css({backgroundColor: color}); 

Answer 4

: Daha bunun gibi birşey bu işlevin kopyanızı değiştirebilecek

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

Bu gibi, CSS için !important ekle

:

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

Dikkatli kullanın.