Question

I came across this in a jQuery book:

$(elems).mouseenter(function(e) {
           $(this).css("opacity", 0.5);
        }).mouseout(function(e) {
           $(this).css("opacity", 1.0);
        })

I removed much of the code for easier reading and then got this:

$(elems).mouseenter(function(e)).mouseout(function(e))

It seems like in general you can do this?:

$(elems).mouseenter(function(e)).mouseout(function(e)).mouseSOMETHING1(function(e))

Another words using the . to concatenate functions?

Also if I broke this code into say:

$(elems).mouseenter(function(e) {$(this).css("opacity", 0.5);});
$(elems).mouseout(function(e) {$(this).css("opacity", 1.0);});

Is this the same?

Thanks,
Jim

Answer 1

It works because all those function returns jQuery object.

   $(elems)  //return jquery object
     .mouseenter(/* ...*/)  //return jquery object
     .mouseout(/* ..*/)     //return jquery object

by this way you can chain as many functions.

$(elems).mouseenter(function(e) {$(this).css("opacity", 0.5);});
$(elems).mouseout(function(e) {$(this).css("opacity", 1.0);});

both methods are functionally same.. except that the 2nd method makes an unnecessary jQuery function call to get $(elems).