jquery - Plugin de ordenación alfa: cómo agregar animación ''shuffle''

jquery-plugins alphabetical

Question

He implementado un complemento de Jquery para identificar y ordenar una colección de elementos secundarios envueltos en un padre. El complemento también, tiene una capacidad de agrupación.

Estoy un poco perdido sobre cómo agregar animaciones al cambio de dom. Pude agregar una animación ''show'' básica que trae los elementos, pero quiero crear un efecto visual dulce ''shuffle''.

(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

Podría usar las animaciones básicas de jQuery con las fadeIn() , fadeOut() , slideUp() , slideDown()

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

Si desea hacer más animaciones avanzadas, podría usar la función jQuery .animate( properties [, duration ] [, easing ] [, complete ] )

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

Finde más información sobre Jquery API doc

O podrías usar animaciones y transiciones CSS3. Si no desea codificar animaciones desde cero, puede usar una biblioteca de animaciones como animate.css

Por ejemplo, puedes combinar jQuery con animaciones animes.css como esta

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

Aquí hay algunos artículos bonitos, article-1 y article-2

Feliz codificacion :)