Question

At the moment I’m adding elements to a page on a click event using after. I’d like to animate this in some way so the new elements don’t suddenly appear out of nowhere.

I’m not bothered what animation method is used as long as it shows to the user what is happening when they click.

I’ve never used animation in jQuery before and have only really found examples for working with existing DOM elements. What pattern should be used for animating the creation of new elements in jQuery?

Answer 1

What I’ve done in the past is insert zero-size placeholder-divs at the point where I want to insert my new element.

I then animate that placeholder to the size I want, then insert a hidden version of the element I want to show inside the placeholder and fade it into view.

Once the fade-in is complete I ‘unwrap’ the placeholder to remove it, using the following code:

    // Essentially, this does the opposite of jQuery.wrap. Here is an example:
    //
    //      jQuery('p').wrap('<div></div>');
    //      jQuery('p').parent().unwrap().remove();
    //
    // Note that it is up to you to remove the wrapper-element after its
    // childNodes have been moved up the DOM
    jQuery.fn.unwrap = function () {
        return this.each(function(){
            jQuery(this.childNodes).insertBefore(this);
        });
    };

All jQuery animation features have ‘onComplete’ handlers that allow you to kick-off different parts of the animation once they’re completed, so it’s not too much of a chore to achieve all of this.

Also, it’s very useful to keep a JavaScript model of all your elements instead of relying on slow DOM-traversal and the jQuery .data() method.