Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animation for adding DOM elements with jQuery

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?

like image 399
Alex Angas Avatar asked Oct 26 '09 15:10

Alex Angas


People also ask

How can add DOM element in jQuery?

Answer: Use the jQuery append() or prepend() method You can add or insert elements to DOM using the jQuery append() or prepend() methods. The jQuery append() method insert content to end of matched elements, whereas the prepend() method insert content to the beginning of matched elements.

How can jQuery be used to create animations?

The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback); The required params parameter defines the CSS properties to be animated.

Is jQuery good for animation?

The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects.

How can add Flash animation button in jQuery?

Pure jQuery solution. var flash = function(elements) { var opacity = 100; var color = “255, 255, 20” // has to be in this format since we use rgba var interval = setInterval(function() { opacity -= 3; if (opacity How can use jQuery to animate a flash to the button? var randomNumber = Math. floor(Math.


4 Answers

You could do something like:

...click(function() {
    $(...).hide().appendTo(...).fadeIn();
}
like image 130
googletorp Avatar answered Sep 18 '22 15:09

googletorp


Try something like this:

$("selector").hide().fadeIn(1000);

where 1000 is the speed of which the item can fade in. I put the hide() in there assuming that the new DOM element is visible when created, not sure if it's needed or not. Best thing to do is put a "display: none" on the new element when you create it and then just use fadeIn().

There's other effects you can use too like slideUp/slideDown so you may want to look into those too.

like image 38
Willson Haw Avatar answered Sep 21 '22 15:09

Willson Haw


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.

like image 33
shuckster Avatar answered Sep 21 '22 15:09

shuckster


A simple fadeIn usually works well.

like image 24
scunliffe Avatar answered Sep 19 '22 15:09

scunliffe