alpha sort plugin: how to add 'shuffle' animation

Question

I've implemented a Jquery plugin to identify and sort a collection of child elements wrapped in a parent. The plugin also, has a grouping capability.

I am sort of lost on how to add in animations to the dom change. i was able to add in a basic 'show' animation that brings in the elements, but i want to create a sweet 'shuffle' visual effect.

(function ( $ ) {

    $.fn.alphaSort = function( options ) {

        /**
         * defaults: changing the keys will kill someone close to you. so, don't do it!
         * **/
        var settings = $.extend({          
            child: 'div', /**collection of child elements within the parent**/
            target: 'span', /**the target element within a single child**/
            order: 'asc', /**the sort order. existing options: asc &  desc**/
            group: true,/**group alphabetically or not**/
            titleCss: 'row'/**the css class styling the header group.**/
        }, options );

        var data = 'data-name'; /**developer must set the values being compared, to a data attribute 'data-name'**/
        var parent = this;   
        var children = this.find(settings.child);

        var container = { letters: [] };

        /**
         * read the dom, each childs target element has a data attribute 'data-name'.
         * read the data attribute and prepare a list of first letters.
         * a key value pair is inserted into the container. 
         * key will be the first letter, the value will be a sublist, containing child elements.
         * the child elements represent institutes which starts with the letter denoted by the key.
         * **/
        children.each(function(){

            var elem = $(this).find(settings.target);
            var name = elem.attr(data);

            var l = name.substring(0,1).toUpperCase();

            if (!(l in container)) {

                container[l] = [];
                container.letters.push(l);
            }

            container[l].push($(this));

       });

        /**
         * sort the list of first letters stored.
         * **/
        container.letters.sort();

        if(settings.order != "asc")
            container.letters.reverse();

        /**
         * clear the parent element. get ready for dom manipulation.
         * **/
        parent.empty();  

        /**
         * iterate through the firt letter list.
         * sort each sublist. each sublist is identified by a first letter 'key'
         * **/
        $.each(container.letters, function(i,letter){

            var list = container[letter];
            list.sort(function(a,b){

                var aelem = $(a).find(settings.target);
                var aName = aelem.attr(data);
                var belem = $(b).find(settings.target);
                var bName = belem.attr(data);

                /**
                 * returns
                 *-1: str1 is sorted before str2
                 * 1: str1 is sorted after str2
                 * 0: two strings are equal
                 * **/
                return aName.toUpperCase().localeCompare(bName.toUpperCase());

            });

            /**
             * if the init script set group to 'true', then group, else skip
             * **/
            if(settings.group)
                parent.append("<div class = 'container-fluid'><div class='"+settings.titleCss+"'><h3 class = 'institute-group-h3'>"+letter+"</h3></div></div>");


            /**
             * append to dom
             * **/

            for(each in list)
                parent.append(list[each]);


        });  

    };

}( jQuery ));

Answer 1

You could use jQuery's basic animations with fadeIn(), fadeOut(), slideUp(), slideDown() functions

$('your selector here').fadeIn();
$('your selector here').fadeIn();
$('your selector here').slideUp();
$('your selector here').slideDown();

If you want to do more advance animations you could use jQuery .animate( properties [, duration ] [, easing ] [, complete ] ) function

$( "your selector" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

Finde more info on Jquery API doc

Or You could use CSS3 animations and transitions. If you don't want to code animations from scratch you could use an animation library like animate.css

For an example you could combine jQuery with animate.css animations like this

$('your-selector').on('click', function () {
   $('your-selectort').addClass('animated bounceInUp');
});

Here are some nice articles article-1 & article-2

Happy coding :)