衝突點擊和懸停動畫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