javascript - 从元素临时解除绑定 mouseenter

Question

我正在尝试使元素的悬停和单击事件都为相同的（在本例中top）属性设置动画。

看看这个小提琴：http: //jsfiddle.net/XC9Xu/1/

a顶部有一个固定的top:-50px和height=100px，

1-当您将鼠标悬停时，它的顶部会动画到top=0并且在 mouseleave 顶部top=-50再次变为。

2-点击：动画top=200px

所以问题是，您单击而不移动光标，一切都很好，但是一旦您移动光标，它就会说：嘿，我在它上面的元素在哪里，我现在不在它上面，回到top=-50px： D

我要告诉它忘记过去，展望未来！

我的期望：我希望元素在单击后保持不变，并且在单击后移动鼠标时top=300px不会返回。top=-50px然后，如果您再次将光标移到它上面，它的顶部将从 300 变为 0，依此类推...

$(document).ready(function(){

    $('a')
    .hover(
        function(){
            $(this).animate({top:0});
        },
        function(){
            $(this).animate({top:-50});
        }
    )
    .on("click",function(){
        $(this).animate({top:300});
    });

});

 a{
    display:block;
    position:fixed;
    top:-50px;
    left:0;
    width:100%;
    height:100px;
    background:#ccc;
}

Answer 1

只需设置一个标志，并使用它来启用/禁用悬停功能。

看到这个小提琴

var click_triggered = false;

$(document).ready(function(){

    $('a')
    .hover(
        function(){
            if(!click_triggered){
                $(this).animate({top:0});
            }
        },
        function(){
            if(!click_triggered){
                $(this).animate({top:-50});
            }
        }
    )
    .on("click",function(){
        click_triggered = true;
        $(this).animate({top:300});       
    });

});

或者，如果您希望它在第二次单击后恢复，您可以执行以下单击处理程序：

    .on("click",function(){
        click_triggered = !click_triggered;
        $(this).animate({top:300});       
    });

Answer 2

这是诀窍

$(document).ready(function(){
     reduceHeight =  function(){
            $(this).animate({top:-50});
     };

    $('a')
    .hover( function(){
            $(this).animate({top:0});
            $(this).bind('mouseleave', reduceHeight);
     })
    .click( function(){
        $(this).unbind('mouseleave');
        $(this).animate({top:300});
    });

});