jQuery - my function gets reference of wrong DOM object -

i've created own hover function changes opacity of text. looks this:

jquery.fn.menuhover = function () {             var object = this;             $(object).css({'opacity':'0.2'});             $(document).delegate(object, 'mouseenter', function() {                 $(object)                     .stop()                     .animate({opacity: 1}, 'slow');             });             $(document).delegate(object, 'mouseleave', function() {                 $(object)                     .stop()                     .animate({opacity: 0.2}, 'slow');             });    };  

and call function:

<script type="text/javascript">     $(document).ready(function() {         $('.menu_text').menuhover();         }); </script> 

it works fine, works entire document instead '.menu_text' class . mean variable 'this' == document instead of '.menu_text'. question how change operate selected object?

it should noted .delegate() has been superseded .on() few versions now.

that isn't recommended way add new methods jquery objects ($()). recommended way is

$.fn.extend({   menuhover: function() {     // ...   } }); 

but that's more nitpick.

the problem, suspect, passing .delegate() jquery object first parameter. the documentation of .delegate() specifies first parameter shall (signature 1) string, (signature 2) string, or (signature 3) string - happened jquery threw hands @ non-string , applied handler $(document). matches happens when use $(document).on() without selector. other possible explanation (revealed during testing) using object (a.k.a. selector matched) in handler will fade @ once.

the following should work (tested in jsfiddle):

$.fn.extend({   menuhover: function() {           .css({opacity: '0.2'})       .on('mouseenter', function () {         $(this).stop().animate({opacity: 1}, 'slow');       })       .on('mouseleave', function () {         $(this).stop().animate({opacity: 0.2}, 'slow');       });   } }); 

explanations:

1. functions extending jquery objects have object in question this. .on() method executes handler this set raw dom node, have call $ on before using jquery methods.
2. i have removed delegation approach, , made method apply passed. shouldn't problem.
3. var object unnecessary ability use this inside .on() (and, indeed, using object producing the wrong result); i've called methods on this.