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.
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.
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/