Question

Given this code (#stage is an anchor tag with a div element inside it):

$('#stage').hover(

function() {
    var $this = $(this);
    $this.find('div').stop().animate({
        'width': '70px',
        'height': '139px',
        'top': '0px',
        'left': '-16px'
    }, 500);
}, function() {
    var $this = $(this);
    $this.find('div').stop().animate({
        'width': '35px',
        'height': '70px',
        'top': '0px',
        'left': '0px'
    }, 500);

});

(also found at http://jsfiddle.net/fXp9U/1/)

On click I need to stop the link taking me away from the page with a ‘return false’ and set the div as active. When you click, it shouldn’t animate any more but should be the large size of the hover state.

If you remove the click event the hover works.

Thanks for you help again.

Answer 1

You can use bind and unbind:

$('#stage').bind({
    'click': stage_onClick,
    'mouseenter': stage_onMouseEnter,
    'mouseleave': stage_onMouseLeave
});

function stage_onClick(event) {
    var $this = $(this);
    $this.unbind('mouseenter', stage_onMouseEnter);
    $this.unbind('mouseleave', stage_onMouseLeave);
    event.preventDefault();
}

function stage_onMouseEnter(event) {
    var $this = $(this);
    $this.find('div').stop().animate({
        'width': '70px',
        'height': '139px',
        'top': '0px',
        'left': '-16px'
    }, 500);
}

function stage_onMouseLeave(event) {
    var $this = $(this);
    $this.find('div').stop().animate({
        'width': '35px',
        'height': '70px',
        'top': '0px',
        'left': '0px'
    }, 500);
}