ansaurus

Question

how to highlight a div for a few seconds using jQuery

Answer 1

+3 A:

One way is to go about like this using setTimeout:

$(function(){
 $('div.highlightable').click(function(){
    $(this).addClass('highlighted');
    setTimeout(function(){
      $('div.highlightable').removeClass('highlighted');}, 2000);
});

Sarfraz 2010-07-25 09:15:34

Exactly what I was looking for !

morpheous 2010-07-25 14:31:14

Answer 2

+2 A:

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);
});

Darin Dimitrov 2010-07-25 09:18:07

Answer 3

+1 A:

I think you are looking for the Highlight effect.

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

Manaf Abu.Rous 2010-07-25 09:20:37

Answer 4

A:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
  <style type="text/css">
  div { margin: 0px; width: 100px; height: 80px; background: #666; border: 1px solid black; position: relative; }
</style>

  <script>
  $(document).ready(function() {

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

  });
  </script>
</head>
<body style="font-size:62.5%;">
  <div></div>
</body>
</html>

Space Cracker 2010-07-25 09:45:05

ansaurus

tags:

views:

answers:

how to highlight a div for a few seconds using jQuery

related questions