Question

Here’s my code that does work:

function mouseOver()
{
    $(".beaver").fadeIn(100);

}

function mouseOut()
{
    $(".beaver").fadeOut(100);
}

$("#group_beaver").bind('mouseenter', mouseOver).bind('mouseleave', mouseOut);

But why doesn’t this work?

function mouseOver(variable)
{
    $(variable).fadeIn(100);

}

function mouseOut(variable)
{
    $(variable).fadeOut(100);
}

$("#group_beaver").bind('mouseenter', mouseOver('.beaver')).bind('mouseleave', mouseOut('.beaver'));

Answer 1

That’s correct; you’re calling mouseOver and expecting it to return a function to be bound to the event. To make it actually do that, though, you can use this code:

function mouseOver(variable) {
    return function() {
        $(variable).fadeIn(100);
    };
}
function mouseOut(variable) {
    return function() {
        $(variable).fadeOut(100);
    };
}