字母排序插件：如何添加“洗牌”动画

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 ));

- lego.warrior

Answer 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.
  });
});

在Jquery API文档中可以找到更多信息。

或者您可以使用CSS3动画和过渡。如果您不想从头开始编写动画，可以使用一个动画库，例如animate.css

例如，您可以将jQuery与animate.css动画组合使用，如下所示：

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

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

愉快编码 :)

- It worked yesterday.