Как временно изменить цвет фона нового элемента, добавленного в DOM? - PullRequest
Новая
       23

Как временно изменить цвет фона нового элемента, добавленного в DOM?

1 голос
/ 06 июня 2009

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

Спасибо.

Ответы [ 3 ]

1 голос
/ 06 июня 2009

Похоже, что самое простое решение сделать это без использования плагина - использовать функцию 'Highlight' пользовательского интерфейса jquery.

1 голос
/ 06 июня 2009

Есть много библиотек, которые сделают это (и много других впечатляющих графических эффектов) для вас, таких как jQuery , MooTools и Прототип . Посмотрите этот вопрос StackOverflow , чтобы узнать, как, например, использовать jQuery для снятия этого эффекта.

В более общем случае вы бы использовали метод setTimeout Javascript, чтобы на какое-то время установить цвет элемента на какое-то время, затем, когда истечет время ожидания, установите его обратно в свой собственный / оригинальный цвет.

0 голосов
/ 06 июня 2009

Вот пример использования jQuery.animate (). Он не использует цвета, но непрозрачность: 

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
 width: 300px;
 height: 300px;
 border: solid #000 1px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
    $("div").click(function() {
        $("<span>Hello there!</span>").appendTo(this)
               .animate({
                    opacity: 0
               }, 500, function() {
                    $(this).animate({
                        opacity: 1,
                    }, 500);
               });
    });
});
</script>
</head>
<body>

<div></div>

</body>
</html>
...