A complex(?) jQuery question

So, I am currently working on a website and I am attempting to have the following things happen upon opening:

1. The site opens in a specific structure.
2. Clicking on any of the links at the bottom of the site causes elements to change in sequence before spawning the content of that link. Code snippet –

$("div#quote").animate( {opacity:.00}, 500, function () {
   $("div#shell").animate( {height:"444px"}, 1500);
   $("div#bgcover").animate( {opacity:.70}, 2500, function() {
      $("div.mainabout").css("display", "none");
      $("div.mainhouserules").css("display", "none");
      $("div.mainicinfo").fadeIn();
      $("div.maindirections").css("display", "none");
      $("div.maincontact").css("display", "none");
      $("div.mainlinks").css("display", "none");
   });
});

Clicking on a subsequent link will cause the content to switch.

Now, all of these things are individually doable in jQuery using .css and .animate functions. However, due to the fact that any one of the links, when being the first link clicked, will cause the sequenced animation to happen, therein lies a problem.

I don’t know a way to tell the system that it doesn’t have to take the time to animate the transition before spawning the new content if this animation has already happened. With my current code setup, first click works fine. 2nd click causes a pause where nothing happens (because it’s already in its finished state) for a duration and then the content finally comes around.

Help?

1 Comment

• 
  jQueryGlobe October 10, 2009 at 12:54 pm

  Why don`t you check if it`s visible eq
  if ($(..).is(‘:visible’) == false) { do your stuff)