Toggling content div on one-page site with jQuery

Vote count:

0

I'm building a portfolio section on a website that will be limited to 4 items. Each item has an image and description that are visible, and a details section that's hidden by default.

The idea is to have the details section fade in when the link for that item is clicked. I have a working fiddle that I put together, but if there's already a details section visible and you click another link, there's a bit of chunky overlap taking place.

This is a snippet of what I'm using to control each detail section:

You can see the fiddle here: http://jsfiddle.net/ERP7L/6/

$("a#project-1-link").click(function(){
  $("div#project-2-details, div#project-3-details, div#project-4-details").fadeOut("",function(){
      $("div#project-1-details").fadeIn(""); 
  });  
});

Is there a better way to accomplish this that will clean up this lag? I tried using a delay on the fadeIn, but it didn't work either.

Thanks in advance!

asked 28 secs ago

Eric Wood

167

Toggling content div on one-page site with jQuery