jQuery顯示/隱藏問題

Question

你好我很新的使用jQuery，我試圖創建一個菜單，當你對鏈接進行挖掘時顯示不同的圖片。它會顯示一張圖片並隱藏其他4張圖片，當您將鼠標移出鏈接時，它會回到默認圖片。我使用懸停功能，但有時當我將鼠標移動到底部時，兩個圖像（與鏈接和默認相關的圖像）都顯示出來，我想知道是否有一些檢查可以確保這一點沒有發生。這是我的代碼的樣子。

$("#blog-img").hide(); 
    $("#contact-img").hide(); 
    $("#headturner-img").hide(); 
    $("#work-img").hide(); 

    $("#blog").hover(
     function(){ 
        $("#default").hide(); 
      $("#contact-img").hide(); 
      $("#headturner-img").hide(); 
      $("#work-img").hide(); 
      $("#blog-img").show("slow"); 
     }, 
     function(){ 
      $("#blog-img").hide(); 
      $("#default").show("slow");  
      } 
    ); 

我很樂意幫助我解決這個問題。

Answer 1

您可能會通過使用計時來顯示圖像來創建競賽條件。

當兩個圖像都顯示時，可能是因爲至少有一個Shows已在第一個執行完成之前執行過。這可能會發生，當你移動部分 - 我們正在說像素 - 進入/離開與懸停對象。

我推薦使用CSS來解決這個問題。它比使用Javascript更乾淨。