jquery подсветка, javascript, изменение цвета
|
Содержание
Общее о примере
В последнее время стало модно временно подсвечивать некоторые объекты, чтобы пользователь на секунду обратил свое внимание. Вот теперь и мне потребовалось это сделать. Оказалось, что опять же внятного объяснения не нашел, а только отрывками. Самая быстрая реализация получилась на jQuery, на чистом языке javascript получилось бы довольно громоздко, поэтому решил на javascript не делать пример. Да jQuery вошел в мой обиход работы над сайтами довольно плотно и поэтому не вижу смысла не использовать этот мощный framework.
Основная загвоздка, к которой требуется отнестись внимательно это то, что потребуется обязательно подключать 2 библиотеки, это непосредственно саму jQuery и jQuery_UI. UI нужен для полноценной работы функции animation.
Хотелось бы отметить, что многие публикуют свои примеры, но при этом не указывают, какие именно библиотеки они используют и думают, что это очевидно, а в результате у 80 процентов пользователей примеры просто тупо не работают.
Ну это все лирика, теперь сам код.
Как вставить теги в тексте textarea?
Цель – временно подсветить объект с последующим возвращением цвета как был.
Для работы потребуются библиотеки
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script type="text/javascript" src="http://yandex.st/jquery-ui/1.8.1/jquery-ui.min.js"></script>
// функция временно подсвечивающая DOM html объект
function sdf_object_color_active(_id, _color_active)
// _id - ID объекта на html странице
// _color_active - цвет подстветки
{
// запоминаем какой цвет был у объекта
var color_normal=$('#'+_id).css('backgroundColor');
// подсвечиваем объект, с длительностью эффекта 500 миллисекунд (0.5 секунды)
$('#'+_id).animate({ backgroundcolor: _color_active }, 0, function()
{ $(this).animate({ backgroundcolor: color_normal }, 500)
});
}
Подробнее можно посмотреть рабочий пример по ссылке.