我已经实现了一个Jquery插件来识别和排序一个包含在父项中的子元素的集合。该插件也具有分组功能。
我如何在动画中添加主动变化，我感到很失落。我能够添加一个引入元素的基本“show”动画，但是我想创建一个甜美的“洗牌”视觉效果。
(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 ));
解决方法
你可以用fadeIn()，fadeOut()，slideUp()，slideDown()函数来使用jQuery的基本动画
$('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 doc找到更多信息
或者您可以使用硬件加速的CSS动画和转换。如果您不想从头编写动画，您可以使用像animate.css这样的动画库
例如，您可以将jQuery与animate.css动画结合在一起
$('your-selector').on('click',function () {
$('your-selectort').addClass('animated bounceInUp');
});
jQuery或css动画？有性能考虑？这里有一些很好的文章article-1& article-2就可以了
快乐编码:)
