मैं पृष्ठभूमि-छवि को अस्थायी रूप से छुपाए बिना "हाइलाइट" jquery प्रभाव का उपयोग कैसे करूं?

Question

मैं एक पृष्ठभूमि छवि सीएसएस में सेट (एक आवर्धक कांच के साथ एक खोज पट्टी) के साथ एक इनपुट एचटीएमएल तत्व पर jQuery ui "आकर्षण" प्रभाव का उपयोग करने की कोशिश कर रहा हूँ। "हाइलाइट" एनीमेशन के दौरान, हालांकि, पृष्ठभूमि छवि अस्थायी रूप से दूर हो जाती है और फिर एक बार हाइलाइट एनीमेशन समाप्त हो जाने पर दिखाई देता है। मैं छवि को पूरे एनीमेशन में रहना चाहूंगा। कोई विचार?

HTML:

<input class="searchInput" id='searchInputWithMap' type="text" tabindex="100" name="searchStructures" /> 

सीएसएस:

.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

जब प्रकाश डाला कहा जाता है, स्रोत 'कोई नहीं' के लिए backgroundImage करता है और मुझे लगता है कि कॉन्फ़िगर करने के लिए एक तरह से के बारे में पता नहीं है। आप हमेशा अपने स्वयं के आकर्षण प्रभाव बना सकते हैं और बस backgroundImage को दूर नहीं (मैं यह कर दिया है, बस कॉपी/पेस्ट मूल और एक .css() कॉल बदल)।

एक और बात आप कर सकते हैं, हालांकि यह साफ नहीं है:

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

वहाँ एक अंतर होगा, लेकिन इस पृष्ठभूमि छवि वापस रखा जाएगा जगह में सही होने के बाद उजागर एनीमेशन शुरू कर दिया है।

Answer 2

आप हाइलाइट रंग करने के लिए एक पारदर्शी अल्फ़ा चैनल जोड़ सकते हैं? मैं सीएसएस के साथ वास्तव में परिचित नहीं हूं, लेकिन यह जांचने के लिए जगह की तरह लग रहा है।

अन्यथा, आप सिर्फ एक संस्करण आपको लगता है कि हाइलाइट होने और बिल्कुल बॉक्स उजागर नहीं किया साथ bg छवि को बदल सकता है?

Answer 3

मैं JQuery UI का मुख्य आकर्षण कोड में खोदे गए, और मुझे लगता है कि लाइन # 4583 आपकी समस्या है:

el.css({backgroundColor: color}); 

Answer 4

:

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

आप इस तरह के और अधिक देखने के लिए इस समारोह की अपनी प्रतिलिपि को बदल सकता है

अपने CSS करने के लिए !important जोड़े, इस तरह:

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

देखभाल के साथ प्रयोग करें।