Как использовать эффект «выделения» jquery без временного скрытия фонового изображения? - PullRequest
Новая
       6

Как использовать эффект «выделения» jquery без временного скрытия фонового изображения?

6 голосов
/ 13 ноября 2009

Я пытаюсь использовать эффект подсветки пользовательского интерфейса jquery для входного HTML-элемента с фоновым изображением, заданным в CSS (панель поиска с увеличительным стеклом). Однако во время анимации «подсветки» фоновое изображение временно исчезает, а затем появляется, когда анимация подсветки заканчивается. Я бы хотел, чтобы изображение оставалось на протяжении всей анимации. Есть идеи?

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;

}

Ответы [ 4 ]

6 голосов
/ 13 апреля 2012

Добавьте !important к вашему CSS, например: 

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

Используйте с осторожностью.

5 голосов
/ 14 ноября 2009

Я копался в выделенном коде JQuery UI , и я думаю, что строка # 4583 - ваша проблема: 

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

Вы можете изменить копию этой функции, чтобы она выглядела примерно так: 

el.css({backgroundColor: color});
2 голосов
/ 14 ноября 2009

Когда вызывается подсветка, источник устанавливает backgroundImage в 'none', и я не знаю, как это настроить. Вы всегда можете создать свой собственный эффект выделения и просто не удалять backgroundImage (я сделал это, просто скопируйте / вставьте оригинал и измените один вызов .css ()).

Еще одна вещь, которую вы можете сделать, хотя она не так чиста: 

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

Будет разрыв, но это вернет фоновое изображение на место сразу после запуска анимации выделения.

0 голосов
/ 13 ноября 2009

Можете ли вы добавить прозрачный альфа-канал к цвету выделения? Я не очень знаком с CSS, но похоже, что это место для проверки.

В противном случае, вы могли бы просто заменить изображение bg созданной вами версией, которая будет выделена цветом и вообще не выделять поле?

...