백그라운드 이미지를 일시적으로 숨기지 않고 "강조"jQuery 효과를 어떻게 사용합니까?

StackOverflow https://stackoverflow.com/questions/1731807

  •  20-09-2019
  •  | 
  •  

문제

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;

}
도움이 되었습니까?

해결책

하이라이트가 호출되면 소스는 배경 지식을 '없음'으로 설정하고이를 구성하는 방법을 모릅니다. 항상 자신의 하이라이트 효과를 만들고 배경 이식을 제거하지 않을 수 있습니다 (이 작업을 수행하고 원본을 복사/붙여 넣기 만하면 1.css () 호출을 변경합니다).

깨끗하지는 않지만 할 수있는 또 다른 일은 다음과 같습니다.

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

간격이 있지만 하이라이트 애니메이션이 시작된 직후 배경 이미지를 다시 제자리에 놓을 것입니다.

다른 팁

추가하다 !important 너의 ~에게 CSS, 이와 같이:

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

조심스럽게 사용하십시오.

나는 하이라이트 코드를 파헤 쳤다 jQuery UI, 그리고 나는 줄 #4583이 당신의 문제라고 생각합니다.

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

이 기능의 사본을 변경할 수 있습니다.

el.css({backgroundColor: color});

하이라이트 색상에 투명 알파 채널을 추가 할 수 있습니까? 나는 CSS에 정말 익숙하지 않지만 확인해야 할 곳처럼 보입니다.

그렇지 않으면 BG 이미지를 강조 표시된 버전으로 바꾸고 상자를 전혀 강조 표시하지 않습니까?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top