Question

I’m using some jQuery to create a fading rollover effect, but I’m having trouble with the behavior of the buttons after performing a click and drag.

<div id="splash_buttons">
    <a id="our_projects_button" href="#work">
        Our Projects
        <div class="normal"></div>
        <div class="hover"></div>
    </a>
</div>

There are two different divs that fade in and out to create the hover fade. The effect works really well except when you click, drag, release, mouseenter and then mouseleave again, the hover state won’t go away. When you click, the active state will show up. It will remain for the duration of the drag until the mouse button is released. Then it will revert back to the hover state and fade finally back into the normal state. After that, if you hover over the button, it will activate the hover state as expected but will not cease the hover state when moving away from the button unless you click the button up and down again.

$('#splash_buttons a, #work_buttons a').live('mouseenter', function() {
            $(this).find('.hover').fadeIn(hoverFadeTime);
}).live('mouseleave', function() {
            if(!isMouseDown) {
                $(this).find('.hover').stop().fadeOut(hoverFadeTime);
            }
}).live('mousedown',function() {
            isMouseDown = true;
            $(this).find('.normal').hide();
}).live('mouseup', function() {
            isMouseDown = false;
            $(this).find('.normal').show();
            $(this).find('.hover').stop().fadeOut(hoverFadeTime);
}).on('dragend', function() {
            $(this).find('.normal').show();
            $(this).find('.hover').stop().fadeOut(hoverFadeTime);
});

I’m not sure if this has something to do with the fact that the normal and hover states are handled by the jQuery and the active state is just a css rule. Can anyone help with this? Thank you!

#our_projects_button {
    float: left;
    position: relative;
    left: -6px;
    width: 173px;
    height: 53px;
    margin: 0 20px 0 0;
    text-indent: -9999px;
}

#our_projects_button .normal {
    position: absolute;
    top: 0;
    left: 0;
    width: 173px;
    height: 53px;
    background: url('img/our_projects_sprite.png') transparent 0 0 no-repeat;
}

#our_projects_button .hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 173px;
    height: 53px;
    background: url('img/our_projects_sprite.png') transparent 0 -53px no-repeat;
}

#our_projects_button .hover:active { background-position: 0 -106px; }

Answer 1

What if you change your dragend code to

.on('dragend', function() {
   $(this).find('.normal').show();
   $(this).find('.hover').stop().fadeOut(hoverFadeTime);
   isMouseDown = false;
});