Question

I created a jQuery plugin to add simple CSS animations on Hover but unfortunately it only applies to items in the page with the .animate class applied to them. How can I make this apply to the object itself? instead of a set class or id. Please help.

(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

You can use this to refer to itself, note that you don’t have to do $(this), since inside this is already referring to a jQuery object; from the docs:

(function( $ ){

  $.fn.myPlugin = function() {

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