Get a free trial // Grow your CSS skills // Land your dream job

Cleaner method for writing this code?

  • # February 24, 2013 at 11:54 pm


    I’m rather new to writing jQuery and was curious if those with experience can suggest a cleaner method for writing the following code. Thank You.

    $(‘div’).hide().fadeIn(600).delay(2000).animate({ opacity: 0, top: “100px” }, 600);

    Essentially this will fade in a div…delay for 2 seconds…slide down from the top while fading out.

    # February 25, 2013 at 12:04 am


    I’ve added two new animations, with a total of three working in unison. The code seems redundant…I’m thinking there must be a solution for simplifying / chaining it together.


    Any help is appreciated…thanks again

    # February 26, 2013 at 1:49 pm

    **Update #2**

    I’ve re-written the code slightly…using setTimeout for animation 2 and 3. The syntax of animation 1, while valid, still seems redundant though. Is there a better practice for simplifying the syntax…or is it fine the way it is?

    **Example 2:**

    # February 26, 2013 at 4:34 pm

    You can put the ‘one’ animate function inside the setTimeout callback with the other animate function and remove the delay function:

    Or perhaps put the setTimeout inside the callback for when the fadeIn ends:

    Maybe make the duration for the animation (and the timeout) vars:

    # February 26, 2013 at 5:04 pm


    Hey…thanks for the suggestions. I think your first example is the most appropriate for what I’m after.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed