일시적으로 배경 이미지를 숨기지 않고 "강조 표시"jquery 효과를 사용하려면 어떻게해야합니까?

Question

CSS (돋보기가있는 검색 막대)에 배경 이미지가 설정된 입력 HTML 요소에 jquery UI 강조 표시 효과를 사용하려고합니다. 그러나 "하이라이트"애니메이션 중에는 배경 이미지가 일시적으로 사라지고 하이라이트 애니메이션이 끝나면 나타납니다. 이미지가 애니메이션 전체에 남아 있기를 바랍니다. 어떤 아이디어?

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

강조 표시가 호출되면 소스는 backgroundImage를 'none'으로 설정하고이를 구성하는 방법을 알지 못합니다. 나만의 강조 효과를 만들고 backgroundImage를 제거하지 않아도됩니다 (원본을 복사/붙여 넣기하고 .css() 호출 하나만 변경).

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

간격이있을 것이다, 그러나 이것은 다시 제자리에 하이라이트 애니메이션이 시작된 직후에 배경 이미지를 넣어 것입니다 : 당신이 할 수있는

또 다른 것은, 그것뿐만 깨끗하지 않지만이다.

Answer 2

당신이 강조 색상에 투명 알파 채널을 추가 할 수 있습니까? 나는 CSS에 익숙하지 않지만 확인해야 할 장소처럼 보일 것입니다.

그렇지 않으면 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; } 

조심해서 사용하십시오.