jQuery show / hide within same content area without a gap

I have a navigation div with a width of 300px. The top level menu should slide to the left upon clicking a link and the corresponding linked div should slide i开发者_JAVA百科n. I have this working but there is a moment where the content fading out to the left from the top nav menu's area is still visible before the new content slides in.

I'm trying to remove this gap, I've had to add a delay to the code to stop it loading under the top menu and then "jumping" which doesn't look good.

The page can be found here: http://projects.dabbble.com/wordcloud/ - click on a link to see the issue.

The JS for this (after loading jQuery and the jQuery UI plugin) is here: http://projects.dabbble.com/wordcloud/lib/js/wordcloud.js?v=0.7

jQuery isn't a strong point for me, so the code can probably be tidied up quite a but so many thanks for any / all help!

James

Something like for one function, you'd need to add classes to your html markup and a title attribute to each link item so that it knew which div to slide in right: -

// Hide Sub Menus on Load
$(".wordcloud-menu").hide();

$(".menu-item").click(function(){

var selectElement = $(this).attr("title");

    $(this).hide("slide", { direction: "left" }, 500);
    // Hide Sub Menus on Load
    $(selectedElement).delay("500").show("slide", { direction: "right" }, 500);
    return false;

});

Would suggest using animate and CSS overflow hidden. For example;

$(selectedElement + ":hidden").show().animate({"right": "+=300px"}, "650");

If I understand correctly what you are trying to achieve, you should try the following:

To go to a subsection:

• .show() that subsection
• move your #wordcloud-sections to the left by 300px

To go back to the main section:

• move your #wordcloud-sections to the right by 300px

Does that make sense to you?