jQuery: How to show an element and use the highlight effect at the same time?

Question

I have two elements on a page.

<div id="a">content</div>
<div id="b" style="display:none">different content</div>

When I click the currently displayed div, I want to hide it and show the other one. This is easy to do:

$('#a').hide();
$('#b').show();

But now I want to take it a step further and highlight the element as it is being displayed. I think that it will involve effect("highlight"), but I can't get it to work. How do I achieve this?

Answer 1

First thing is to correct your ID attributes. They are not allowed to start with a number.

Given that, you probably just need to load jQueryUI. It is required for that effect to work.

http://jqueryui.com/demos/effect/

Here's an example: http://jsfiddle.net/r6pKn/

HTML

<div id="div1">content</div>
<div id="div2" style="display:none">different content</div>​

jQuery

$('#div1').click(function() {
   $(this).hide();
   $('#div2').show().effect('highlight');
});​