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插件

回答

相關問題