单击时取消绑定悬停

Question

鉴于此代码（#stage是一个锚标记，其中包含div元素）：

$('#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);

});

（也见http://jsfiddle.net/fXp9U/1/）

点击后我需要停止链接，让我离开页面，返回'false false'并将div设置为活动状态。单击时，它不应再动画，但应该是悬停状态的大尺寸。

如果删除点击事件，则悬停可以正常工作。

再次感谢您的帮助。

Answer 1

您可以使用bind和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);
}

Answer 2

要取消绑定活动，请使用off()，并阻止链接的默认操作（链接JS Fiddle中的#stage元素（在问题正文中）出现< / em>是a，不是 a div）：

$('#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);

    }).click(   
        function(e) {
            // prevents the default action of the link
            e.preventDefault();
            // animates the div element to the 'finished' position
            $(this)
            // unbinds the hover after a click
            .off('hover')
            // finds the child 'div' element, and prevents animation queueing
            // (just as it did in your original code)
            .find('div').stop()
            // animates the div element to the 'finished' position
            .animate({
                'width': '35px',
                'height': '70px',
                'top': '0px',
                'left': '0px'
            }, 500);
        });

JS Fiddle demo

参考文献：

• off()。
• event.preventDefault()。