如何使悬停监听器可选

Question

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

我需要该div在悬停时进行动画制作，但只有当.isDown类已通过点击功能添加到其他元素时。

Fiddle

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

这里是工作代码：

我删除了你的代码.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 2

使用相同的条件下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 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; 
}