css3 js插件,jQuery.transform.js 简单好用的CSS3变形插件

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$(function() {

$('#basic').delegate('.square', 'mouseenter', function() {

if (!$(this).queue("fx").length) {

$(this).animate({

transform: $(this).data('trans')

}).rewind();

}

});

var transforms = [

'scale(.66) skewY(-45deg)',

'translate(20px) scale(.66) skewY(-45deg)',

'translate(150px,50px) scale(1.5,1)',

'translate(280px) scale(.66) skewY(45deg)',

'translate(300px) scale(.66) skewY(45deg)'

],

$squares = $('#basic5678 .square').each(function(i) {

$(this).css({

transform: transforms[i]

});

});

$('#basic5678').mouseenter(function() {

$squares.each(function(i) {

$(this).animate({

transform: transforms[i + 1]

});

});

}).mouseleave(function() {

$squares.each(function(i) {

$(this).animate({

transform: transforms[i]

});

});

});

$.fn.rewind = function() {

return this.each(function() {

$(this).delay(

2000

).queue(function() {

$(this).css('opacity', .5).dequeue();

}).animate({

transform: ''

}).queue(function() {

$(this).css('opacity', 1).dequeue();

});

})

};

});