Small Jquery animate function issue

I'm using this Jquery animate function:

$(document).ready(function() {
    $("#trigger").hover(function() {
        $("#mask")开发者_如何学运维.animate({            
    width: 'toggle', left: '+=0'}, 250, 'easeout');
    });
});

When a user hovers over the trigger span area (<span id="trigger">), the mask (<div id="mask">) slides left. The mask then returns to position when a user moves his mouse away from the trigger region.

It works perfectly.

However, if a user's mouse is hovered over the trigger span area when the page loads, the mask slides in reverse, that is, while the user hovers over the trigger span, it slides into position. When s/he moves away from the trigger region, the mask slides left.

Does anyone know of a way to prevent this from happening?

The problem is that you are using 'toggle' and a single handler. So the toggle occurs on mouse enter and mouse exit. If you start in the trigger div, exiting makes it toggle the first time.

To fix this, use two handlers:

$(document).ready(function() {
    $("#trigger").hover(function() {
        $("#mask").animate({
            width: '0px',
        }, 250, 'easeout');
    },function() {
        $("#mask").animate({
            width: '100px',
        }, 250, 'easeout');
    });
});

Of course, you have to have the width of your #mask. If it is variable, you can still work around this.