Grow your CSS skills. Land your dream job.

Cleaner method for writing this code?

  • # February 24, 2013 at 11:54 pm

    Hello,

    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

    **Update**

    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.

    **Example:** http://jsfiddle.net/MvQsT/89/

    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:** http://jsfiddle.net/MvQsT/92/

    # 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: http://jsfiddle.net/MvQsT/97/

    Or perhaps put the setTimeout inside the callback for when the fadeIn ends: http://jsfiddle.net/MvQsT/98/

    Maybe make the duration for the animation (and the timeout) vars: http://jsfiddle.net/MvQsT/99/

    # February 26, 2013 at 5:04 pm

    @CrocoDillon

    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.

*May or may not contain any actual "CSS" or "Tricks".