highlight div for few seconds

Question

I have many div's, when ever I any of the div, its content gets copied to the top most div, but I want to highlight the top most div, how can I do it using jQuery.

Code:

<div id="code"> </div>

<div id="1">Click Me</div>
<div id="2">Click Me, please</div>

When I click div either with id 1 or 2, it contents get copied to div with "code" id, but I need to highlight for few seconds, so that I can notify user that something is changed.

Answer 1

try this.... jquery has Highlight to achieve this..

$(document).ready(function() {
$('div.success').effect("highlight", {}, 3000);
});

Answer 2

There is a simple way to achieve this using CSS and jQuery too, Check this out,

CSS

@keyframes highlight {
    0% {
        background: #ffff99; 
    }
    100% {
        background: none;
    }
}

.highlight {
    animation: highlight 2s;
}

jQuery:

function highlight(){
    $('#YourElement').addClass("highlight");
    setTimeout(function () {
          $('#YourElement').removeClass('highlight');
    }, 2000);
}

Use highlight() function in your events.

Answer 3

If you're using jQuery UI, you can do this:

$('#code').effect('highlight',{},3000); // three seconds

Separately, your IDs on those lower two elements are invalid. You can't start an ID with a number (except, as Vivek points out, in HTML5). Instead of 1 or 2, use something with some semantic value, like answer1 or article1.

Edit: Here's how to do it using your current HTML, including a click handler for the divs:

$('#a1,#a2').click( function(){
   $('#code')
       .html( $.trim( $(this).text() ) )
       .effect('highlight',{},1000); 
});

Here it is in action: http://jsfiddle.net/redler/KrhHs/

Answer 4

very quick and dirty way to do that (5 minutes looking on the documentation :p):

<script>
  $(function() {
    //when clicking on all div but not the first one
    $("div:not(:first)").click(function() {
      //Content of the selected div gets copied to the top one
      $("div:first").text($(this).text());
      //At the end of the first animation execute the second animation
      $("div:first").animate({
          opacity:"0.5"
      }, 1000, function() {
        $("div:first").animate({
            opacity:"1"
        }, 1000);
      });
    });
  });

</script>

Hope that helps!