Question

我正在尝试为元素设置悬停和点击事件，同时为相同的动画设置（在这种情况下为top）属性。

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

1-当你将其顶部动画悬停至top=0时，在mouseleave top上再次变为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

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

See this fiddle

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});
    });

});

从元素临时解除未绑定的mouseenter

2 个答案: