Hi,
I'm developing a webpage (using jquery) where the user can add new graphical controls to the DOM (for example, the user clicks on a link and a new DIV is created). How can I change the background color of this new element for a few seconds (and then it will revert back to its original color)? I want to change the color to give a visual indicator to the user about the location of the new element.
Thanks.
There are lots of libraries that will do this (and many other impressive graphical effects) for you, like jQuery, MooTools, and Prototype. Check out this StackOverflow question for how to use jQuery to pull this effect off, for example.
More generally, you'd use Javascript's setTimeout method to set an element's color to something for a while, then when the timeout runs, set it back to its proper/original color.
It looks like the simplest solution to do this without using a plugin is by using the 'Highlight' feature of jquery UI.
Here's an example using jQuery.animate(). It doesn't use colors, but opacity:
<!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>