Плагин альфа-сортировки: как добавить анимацию 'shuffle'

Я реализовал плагин Jquery для идентификации и сортировки коллекции дочерних элементов, завернутых в родительский. Плагин также имеет возможность группировки.

Я как бы проиграл, как добавить анимацию к изменению dom. я смог добавить в базовую анимацию "show", которая добавляет элементы, но я хочу создать приятный визуальный эффект "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 ));

Ответы

Ответ 1

Вы можете использовать основные анимации jQuery с функциями fadeIn(), fadeOut(), slideUp(), slideDown()

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

Если вы хотите сделать больше предварительных анимаций, вы можете использовать функцию jQuery .animate( properties [, duration ] [, easing ] [, complete ] )

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

Finde подробнее о JQuery API doc

Или Вы можете использовать аппаратные ускоренные анимации и переходы CSS. Если вы не хотите кодировать анимацию с нуля, вы можете использовать анимационную библиотеку, например animate.css

В качестве примера вы можете комбинировать jQuery с анимациями animate.css, подобными этому

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

jQuery или css анимации? У вас соображения производительности? Вот несколько хороших статей статья-1 и статья-2 на нем

Счастливое кодирование:)