0

我创建了一个 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);
4

2 回答 2

0

用这个替换 $(".animate") 这应该做你想要的!

于 2012-05-31T02:14:13.990 回答
0

您可以使用thisto 引用自身,注意您不必这样做$(this),因为 insidethis已经引用了一个jQuery对象;来自文档

(function( $ ){

  $.fn.myPlugin = function() {

    // there's no need to do $(this) because
    // "this" is already a jquery object
于 2012-05-31T02:15:12.807 回答