我创建了一个 jQuery 插件来在 Hover 上添加简单的 CSS 动画,但不幸的是它只适用于页面中应用了 .animate 类的项目。我怎样才能使它适用于对象本身?而不是一组类或 id。请帮忙。
(function($){
$.fn.extend({
animate: function(options) {
var defaults = {
animation: 'bounce'
};
var options = $.extend(defaults, options);
return this.each(function()
{
var o = options;
var obj = $(this);
var animation = o.animation;
obj.hover(function()
{
switch(animation){
case 'bounce':
$(".animate").addClass('bounce');
break;
case 'shake':
$(".animate").addClass('shake');
break;
case 'flash':
$(".animate").addClass('flash');
break;
case 'tada':
$(".animate").addClass('tada');
break;
case 'swing':
$(".animate").addClass('swing');
break;
case 'wobble':
$(".animate").addClass('wobble');
break;
case 'wiggle':
$(".animate").addClass('wiggle');
break;
case 'pulse':
$(".animate").addClass('pulse');
break;
case 'flip':
$(".animate").addClass('flip');
break;
case 'flipInX':
$(".animate").addClass('flipInX');
break;
case 'flipOutX':
$(".animate").addClass('flipOutX');
break;
case 'flipInY':
$(".animate").addClass('flipInY');
break;
case 'flipOutY':
$(".animate").addClass('flipOutY');
break;
case 'fadeIn':
$(".animate").addClass('fadeIn');
break;
case 'fadeInUp':
$(".animate").addClass('fadeInUp');
break;
case 'fadeInDown':
$(".animate").addClass('fadeInDown');
break;
case 'fadeInLeft':
$(".animate").addClass('fadeInLeft');
break;
case 'fadeInRight':
$(".animate").addClass('fadeInRight');
break;
case 'fadeInUpBig':
$(".animate").addClass('fadeInUpBig');
break;
case 'fadeInDownBig':
$(".animate").addClass('fadeInDownBig');
break;
case 'fadeInLeftBig':
$(".animate").addClass('fadeInLeftBig');
break;
case 'fadeInRightBig':
$(".animate").addClass('fadeInRightBig');
break;
case 'fadeOut':
$(".animate").addClass('fadeOut');
break;
case 'fadeOutUp':
$(".animate").addClass('fadeOutUp');
break;
case 'fadeOutDown':
$(".animate").addClass('fadeOutDown');
break;
case 'fadeOutLeft':
$(".animate").addClass('fadeOutLeft');
break;
case 'fadeOutRight':
$(".animate").addClass('fadeOutRight');
break;
case 'fadeOutUpBig':
$(".animate").addClass('fadeOutUpBig');
break;
case 'fadeOutDownBig':
$(".animate").addClass('fadeOutDownBig');
break;
case 'fadeOutLeftBig':
$(".animate").addClass('fadeOutLeftBig');
break;
case 'fadeOutRightBig':
$(".animate").addClass('fadeOutRightBig');
break;
case 'bounceIn':
$(".animate").addClass('bounceIn');
break;
case 'bounceInUp':
$(".animate").addClass('bounceInUp');
break;
case 'bounceInDown':
$(".animate").addClass('bounceInDown');
break;
case 'bounceInLeft':
$(".animate").addClass('bounceInLeft');
break;
case 'bounceInRight':
$(".animate").addClass('bounceInRight');
break;
case 'bounceOut':
$(".animate").addClass('bounceOut');
break;
case 'bounceOutUp':
$(".animate").addClass('bounceOutUp');
break;
case 'bounceOutDown':
$(".animate").addClass('bounceOutDown');
break;
case 'bounceOutLeft':
$(".animate").addClass('bounceOutLeft');
break;
case 'bounceOutRight':
$(".animate").addClass('bounceOutRight');
break;
case 'rotateIn':
$(".animate").addClass('rotateIn');
break;
case 'rotateInDownLeft':
$(".animate").addClass('rotateInDownLeft');
break;
case 'rotateInDownRight':
$(".animate").addClass('rotateInDownRight');
break;
case 'rotateInUpLeft':
$(".animate").addClass('rotateInUpLeft');
break;
case 'rotateInUpRight':
$(".animate").addClass('rotateInUpRight');
break;
case 'rotateOut':
$(".animate").addClass('rotateOut');
break;
case 'rotateOutDownLeft':
$(".animate").addClass('rotateOutDownLeft');
break;
case 'rotateOutDownRight':
$(".animate").addClass('rotateOutDownRight');
break;
case 'rotateOutUpLeft':
$(".animate").addClass('rotateOutUpLeft');
break;
case 'rotateOutUpRight':
$(".animate").addClass('rotateOutUpRight');
break;
case 'lightSpeedIn':
$(".animate").addClass('lightSpeedIn');
break;
case 'lightSpeedOut':
$(".animate").addClass('lightSpeedOut');
break;
case 'hinge':
$(".animate").addClass('hinge');
break;
case 'rollIn':
$(".animate").addClass('rollIn');
break;
case 'rollOut':
$(".animate").addClass('rollOut');
break;
}
$(".animate").addClass('animated');
},
function()
{
$('.animate').removeClass('animated bounce bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeInRightBig fadeOutUp fadeOutUpBig flash flip flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut pulse rollIn rollOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight shake swing tada wiggle wobble');
});
});
}
});
})(jQuery);