CSS Animation Hover jQuery 插件的问题

Question

我创建了一个jQuery插件来在悬停上添加简单的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);

Answer 1

您可以使用this来引用自身，请注意，您不必执行$(this)，因为内部this已经引用了jQuery对象; 来自文档：

(function( $ ){
  $.fn.myPlugin = function() {
    // there's no need to do $(this) because
    // "this" is already a jquery object

Answer 2

将 $（".animate"） 替换为那应该做你想做的事！