plug-in di ordinamento alfabetico: come aggiungere animazione "shuffle"

Question

Ho implementato un plug-in Jquery per identificare e ordinare una raccolta di elementi figlio avvolti in un genitore. Anche il plugin ha una capacità di raggruppamento.

Sono un po 'perso su come aggiungere animazioni al cambio dom. Sono stato in grado di aggiungere un'animazione di base 'show' che introduce gli elementi, ma voglio creare un dolce effetto visivo '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

Si potrebbe utilizzare le animazioni di base di jQuery con fadeIn(), fadeOut(), slideUp(), slideDown() funzioni

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

Se si vuole fare animazioni più anticipo è possibile utilizzare la funzione jQuery .animate(properties [, duration ] [, easing ] [, complete ])

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

Trova maggiori informazioni su Jquery API doc

Oppure È possibile utilizzare animazioni e transizioni CSS con accelerazione hardware. Se non si vuole codificare le animazioni da zero è possibile utilizzare una libreria di animazione come animate.css

Per un esempio si potrebbe combinare jQuery con animazioni animate.css come questo

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

jQuery o CSS animazioni? Hai considerazioni sulle prestazioni? Qui ci sono alcuni articoli belle article-1 & article-2 su di esso

Felice di codifica :)