Alex Rivera | Logout

how to highlight a div for a few seconds using jQuery

Asked 2010-07-25T09:12:13.807
12

I want to be add the following to a a page:

When a div is clicked, I want to:

  1. change the background color of the clicked on div for a few seconds
  2. revert back to the original background color after a few seconds

I want to do this by using only jQuery available functions - i.e. not using a plugin or anything else. I am relatively new to jQuery, but I think a possible solution involves the use of changing the class of the selected div and using a timer.

I am not sure how to put it all together though. Can anyone provide a few lines that show how to do it?

This is what I have so far:

$(function(){
 $('div.highlightable').click(function(){
    //change background color via CSS class
    $(this).addClass('highlighted);
    //set a timer to remove the highlighted class after N seconds .... how?
 });
});
jquery
Edit
Report

2 Answers

6

I think you are looking for the Highlight effect.

http://docs.jquery.com/UI/Effects/Highlight

answered 2010-07-25T09:20:37.263
4

You could use the setTimeout function:

$('div.highlightable').click(function(){
    var $this = $(this);
    //change background color via CSS class
    $this.addClass('highlighted');
    // set a timeout that will revert back class after 5 seconds:
    window.setTimeout(function() {
        $this.removeClass('highlighted');
    }, 5 * 1000);
});
answered 2010-07-25T09:18:07.093

Your Answer