jquery - alpha排序插件: how to add 'shuffle' animation

Question

我实现了一个 Jquery 插件来识别和排序包装在父元素中的子元素集合。该插件还具有分组功能。

我对如何向 dom 更改添加动画感到有点迷失。我能够添加一个基本的“显示”动画来引入元素，但我想创建一个甜美的“随机”视觉效果。

(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

您可以通过 fadeIn()、fadeOut()、slideUp()、slideDown()< 来使用 jQuery 的基本动画 函数

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

如果你想做更多高级动画，你可以使用 jQuery .animate(properties [,uration ] [, easing ] [,complete ] ) function

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

查找有关 Jquery API doc 的更多信息

或者您可以使用 CSS3 动画和过渡。如果您不想从头开始编写动画代码，您可以使用像 animate.css 这样的动画库。

例如，您可以将 jQuery 与 animate.css 动画结合起来，如下所示

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

这里有一些不错的文章 article-1 & article-2

祝你编码愉快:)