Question

Newbie to jquery here…

I have 2 jquery scripts that attach to 1 div.

1- scrolls inside the div (overflow) based on mousemove

    $("#navwrapper").mousemove(function(e){}

2- slides the whole thing in or out based on hover.

 $(function() { $('#navwrapper').hover( function () {}

I don’t understand the different invocation methods either if someone would care to describe that to me as well….

Independently, (one or the other js commented out) they both work. Together, it’s whatever one comes first in the code that wins.

Is there a way to combine these two functionalities or calls? I’ve read about bind but am not sure that’s what i need to do here.

both are within a single $(document).ready(function() { } along with a bunch of other code (that was removed to test).

Both of these are parts from stuff i found around the net, that i’ve hacked a bit to work for what i want. I appreciate any help.

Thanks

fiddle link:
http://jsfiddle.net/briansol/Y6hcs/

it doesn’t perform perfectly in the fiddle due to the positioning elements it appears (ie, negative margins within the frames is off) so you might want to pull it out on to a page.

Answer 1

You can easily chain these items together like this:

$(function() {
    $('#navwrapper').hover( function () {
        // do something on hover
    }, function () {
        // do something on loss of hover
    }).mousemove(function (e) {
        // do something else
    });
});

Order in which the handlers are triggered depends on the actual order in which the events occur.