CSS动画悬停问题jQuery插件

我创建了一个jQuery插件来为悬停添加简单的CSS动画，但不幸的是，它只适用于页面中的.animate类应用于它们的项目。我怎样才能使这适用于对象本身？而不是设置的类或ID。请帮忙。CSS动画悬停问题jQuery插件

(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);

来源

2012-05-31 JamesBong

你试过'this.addClass（'bounce'）'etc？ –

我很不幸地尝试了它并没有帮助 – JamesBong

您可以使用this指本身，注意，你不必做$(this)，因为里面this已经指的是jQuery对象;从docs：

(function($){ 

    $.fn.myPlugin = function() { 

    // there's no need to do $(this) because 
    // "this" is already a jquery object

来源

2012-05-31 02:15:12

对不起，我对这个问题仍然非常陌生，好像总是有一种更简单的方法来获得某些东西完成，想想我可能会看到如果我得到这个工作，但没有运气，但谢谢 – JamesBong

@ user1427307看着你的代码，我想你误解了如何编写一个插件，尝试阅读我链接到我的答案，并通过它的文档:) –

是的..我有一个坏习惯，只是跳进东西，谢谢:) – JamesBong

替换$（ “动画”）与本这应该做你想要的！

来源

2012-05-31 02:14:13 box86rowh

我很不幸地尝试过它仍然没有工作，我认为它可能也是 – JamesBong

CSS动画悬停问题jQuery插件

回答

相关问题