冲突点击和悬停动画Jquery

Question

我有一个小问题，我的jQuery代码。

这里是我的代码：

$("#bloc-search").click(function(){ 
     $(this).toggleClass("bloc-search-highlight"); 
     //var jObj = $(this); 
}); 

if ($("#formulaire-search").is(':visible')){ 

    $('.search').attr('src', '/img/search-blanc.png'); 

} else { 

    $("#bloc-search").hover(
     function(){ 
      $('.search').attr('src', '/img/search-blanc.png'); 
     }, function(){ 
      $('.search').attr('src', '/img/search-blue.png'); 
    }); 

} 

它的工作原理几乎完美，但我的问题时，我的＃formulaire搜索是可见悬停功能还在工作，我不知道为什么，因为我如果我没有悬停功能。 我也尝试用hasClass而不是可见的方式...

一个想法？

谢谢您的帮助;-)

Answer 1

你可以试试这个：

if ($("#formulaire-search").is(':visible')){ 
    $("#bloc-search").unbind('mouseenter mouseleave'); 
    ... other stuff ... 
} else { 
    $("#bloc-search").bind('mouseenter mouseleave'); // to be sure 
    ... other stuff ... 
} 

您可能当你需要悬停功能

UPDATE

重新绑定，然后

这是可行的 - 使用mouseenter和mouseleave效果很好，也可以使用ķ本身一样简单

if ($("#formulaire-search").is(':visible')){ 

    $('.search').attr('src', '/img/search-blanc.png'); 

} else { 

    // do what you want here - only works when #formulaire-search not visible  
    $("#bloc-search").on('mouseenter', function(){ 
      $(this).addClass('goTeal'); 
    }); 

    $("#bloc-search").on('mouseleave', function(){ 
      $(this).removeClass('goTeal'); 
    }); 

} 

Here's a fiddle to look at