It's as simple as this:
<ul class="menu">
<li><a href="#fish">Item</a></li>
<li><a href="#bear">Item</a></li>
</ul>
<div id="contents">
<div id="fish">contents 1</div>
<div id="bear">contents 2</div>
</div>
$('.menu li a').click(function(){
var which = $(this).attr('href').substring(1); //remove the '#'
$('#contents div:visible').fadeOut(800, function(){
$('#'+which).fadeIn(800);
});
});
On Jan 6, 2:15 pm, Bromide <dcl...@clughportfolio.com> wrote:
> Hello,
>
> Does any plug-in like this exist?:
>
> I have several <div>'s on a page.
> There is a menu on the page that corresponds with each <div>.
> Initially, there should only be one <div> showing.
> When the user clicks a menu item, the corresponding <div> fades in.
> When the user clicks another menu item, the current <div> fades out
> and the new <div> fades in without a cross fade. The existing <div>
> should fade out completely before the new <div> fades in.
>
> I went through the plug-ins list and found some that almost did this,
> but not quite.
>
> Thanks for your help.
