Question

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

我需要div来悬停动画，但只有当.isDown类被click函数添加到其他元素时才会动画。

$(".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")){

$(".fuckerMOVE").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);
    }
});

<强> Check Fiddle

Answer 2

这是工作代码：

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

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

Fiddle

问题是文档加载时达到if ($(".move").hasClass("isDown")){，这可能是假的。我的解决方案就是在你想要绑定时直接在元素上应用悬停绑定。

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

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

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

Fiddle

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

如何使悬停侦听器可选

3 个答案: