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.

Possible duplicate of [How do you make an element "flash" in jQuery](https://stackoverflow.com/questions/275931/how-do-you-make-an-element-flash-in-jquery) — cweiske, Aug 07 '18 at 12:11

Vivek · Accepted Answer · 2011-02-02T07:26:21.847

33

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

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

edited Feb 02 '11 at 07:26

answered Feb 02 '11 at 07:11

Vivek

10,978
14
48
66

1

I am using jQuery and jQuery UI Core, will this effect work, right now it's not working. please suggest – I-M-JM Feb 02 '11 at 07:14
yes..it should work...i have given you reference for highlight..you can see there...it's working. are you getting any error? – Vivek Feb 02 '11 at 07:20
2

@I-M working fine for me: http://jsfiddle.net/yahavbr/XdUGn/ please check that and see that it works.. – Shadow The GPT Wizard Feb 02 '11 at 07:40
1

I include `jquery.effects.core.js` and `jquery.effects.highlight.js` from jQuery UI and it works. – D.Tate Oct 09 '12 at 17:18

score 20 · Answer 2 · answered Sep 14 '18 at 05:15

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.

Ken Redler · Answer 3 · 2011-02-02T07:31:46.817

9

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/

edited Feb 02 '11 at 07:31

answered Feb 02 '11 at 07:06

Ken Redler

23,863
8
57
69

I am using jQuery and jQuery UI Core, will this effect work, right now it's not working. please suggest – I-M-JM Feb 02 '11 at 07:13
Vivek, quite right, I've amended the answer. @IMJM, there was a typo in my code snippet -- a missing quote. I've fixed it; perhaps that's what's tripping you up? – Ken Redler Feb 02 '11 at 07:27

score 3 · Answer 4 · answered Feb 02 '11 at 07:33

3

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!

answered Feb 02 '11 at 07:33

Laurent T

1,070
4
13
25

As Ken and Vivek pointed out, it might be better to use `$('div:first').effect('highlight',{},3000);` – Laurent T Feb 02 '11 at 07:38
2

Laurent: But if you want to use .effect(), you have to include jQuery UI dependency. – Xdg Sep 07 '17 at 16:37

highlight div for few seconds

4 Answers4