Конфликт с анимацией click и hover 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 ... 
} 

Вы, возможно, придется перепривязывают это тогда, когда вам нужна функциональность Hover

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