javascript - 如何使悬停侦听器可选

Question

我遇到了一些困难，有人可以为我指出这个小提琴的正确方向吗？

我需要 div 在悬停时进行动画处理，但前提.isDown是单击功能将类添加到不同的元素。

小提琴

$(".move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
    $(this).stop().animate({opacity:"0.5"}, 270);
    $(this).removeClass("isDown");
            
            //can put hover in here????
} else {
    $(this).stop().animate({opacity:"1"}, 300);
    $(this).addClass("isDown");
}
return false;
});

if ($(".move").hasClass("isDown")){

$(".funnyMOVE").hover(
   function() {
       $(this).stop().animate({top:"10px"},215);
   }, 
   function() {
       $(this).stop().animate({top:"0px"},230);
});

}

Answer 1

在函数内部使用相同的条件hover。您只是根据条件在 DOM 中绑定事件。因此，事件永远不会受到约束，因为条件是false开始的。

$(".fuckerMOVE").hover(

function () {
    if ($(".move").hasClass("isDown")) {
        $(this).stop().animate({
            top: "10px"
        }, 215);
    }
},

function () {
    if ($(".move").hasClass("isDown")) {
        $(this).stop().animate({
            top: "0px"
        }, 230);
    }
});

检查小提琴

Answer 2

这是工作代码：

我在点击之外删除了您的代码.move并将其放入其中：

$(".fuckerMOVE").hover(function () {
    $(this).stop().animate({
        top: "10px"
    }, 215);
},
function () {
    $(this).stop().animate({
        top: "0px"
    }, 230);
});

小提琴

问题是if ($(".move").hasClass("isDown")){在文件加载时达到了，这本来是错误的。我的解决方案只是在您希望绑定元素时直接在元素上应用悬停绑定。

---

.move我实际上刚刚意识到，如果再次单击它，您似乎想要删除绑定。如果是这种情况，您可以将绑定移动到else块中，然后将其添加到if块中：

$(".fuckerMOVE").off("mouseenter mouseleave");

原因是幕后mouseenter为这些事件设置了侦听器。mouseleavehover()

小提琴

Answer 3

不确定这是否是您想要的。

http://jsfiddle.net/hvLA6/

$("#move").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ){
    $(this).stop().animate({opacity:"0.5"}, 270);
    $(this).removeClass("isDown");        
} else {
    $(this).stop().animate({opacity:"1"}, 300);
    $(this).addClass("isDown");
}

if ($("#move").hasClass("isDown")){
    $(".fuckerMOVE").hover(
       function() {
           $(this).stop().animate({top:"10px"},215);
       }, 
       function() {
           $(this).stop().animate({top:"0px"},230);
    });
}
return false;
});

CSS

div {
    width:100%;
    height:100px;
    background:black;
    position:relative;
}
#move {
    font-size:20px;
    background:pink;
}