Mouseenter和Mouseleave工作不正常

Question

我有多個圖像。當我將鼠標懸停在每張圖片上時，它會變爲另一張圖片，並在鼠標懸停時返回到其上一張圖片。問題是，當我們在每個圖像上快速執行此過程時，每個圖像都會保留其懸停圖像，但不會恢復到之前的圖像。但是當我慢慢地做這個效果和功能正常工作。我只給出兩個圖像的以下代碼片段。請幫我解決這個問題。對不起我寫的英文不好。

HTML部分

<div style="float:left;"> 
    <a class="dialog-link" href="#" > 
     <img src="images/twitter.png" width="126" height="78" border="0" class="twitter_h"/>  
    </a> 
</div> 

<div style="float:left; margin-left:83px;"> 
<a class="dialog-link" href="#" target="_blank"> 
<img src="images/linkedin.png" width="232" height="78" border="0" class="linkedin_h"/></a> 
</div> 

JQUERY PART

<script> 
$(function(){ 

    var link_open=false; 
    var openGif_t = $(".twitter_h").attr("src");  
    var closedGif_t = openGif_t.replace("twitter.png", "follow1.png"); 

    var openGif_l = $(".linkedin_h").attr("src"); 
    var closedGif_l = openGif_l.replace("linkedin.png", "connect1.png"); 

$(".twitter_h") 
    .mouseenter(function() { 
    $(this).fadeOut(function(){ 
      $(this).attr("src", closedGif_t); 
      $(this).fadeIn(150); 
     }); 
    }) 
    .mouseleave(function() { 
    $(this).fadeOut(function(){ 
      $(this).attr("src", openGif_t); 
      $(this).fadeIn(150); 
     }); 
    }); 


$(".linkedin_h") 
    .mouseenter(function() { 
     //alert(closedGif) 
     $(this).fadeOut(function(){ 
      $(this).attr("src", closedGif_l); 
      $(this).fadeIn(150); 
     }); 
    }) 
    .mouseleave(function() { 
     // alert($(this).attr("src")); 
     $(this).fadeOut(function(){ 
      $(this).attr("src", openGif_l); 
      $(this).fadeIn(150); 
     }); 
    }); 

}); 

Answer 1

您可以綁定鼠標輸入和鼠標使用的簡便方法，hover()離開事件。

下面是一個簡單的例子：

$(".twitter_h").hover(

function() { 
    console.log("mouseEnter"); 
    $(this).stop().fadeOut(function() { 
     $(this).attr("src", closedGif_t).fadeIn(150); 
    }); 

}, function() { 
    console.log("mouseLeave"); 
    $(this).stop().fadeOut(function() { 
     $(this).attr("src", openGif_t).fadeIn(150); 
    }); 
});​ 

Answer 2

懸停（）方法指定兩個功能，當鼠標指針懸停在所選元素來運行。

此方法觸發mouseenter和mouseleave事件。

$(function(){ 

     var link_open=false; 
     var openGif_t = $(".twitter_h").attr("src");  
     var closedGif_t = openGif_t.replace("twitter.png", "follow1.png"); 

     var openGif_l = $(".linkedin_h").attr("src"); 
     var closedGif_l = openGif_l.replace("linkedin.png", "connect1.png"); 

    $(".twitter_h").hover(function() { 
     $(this).fadeOut(function(){ 
       $(this).attr("src", closedGif_t); 
       $(this).fadeIn(150); 
      }); 
     }, 
     function() { 
     $(this).fadeOut(function(){ 
       $(this).attr("src", openGif_t); 
       $(this).fadeIn(150); 
      }); 
     }); 


    $(".linkedin_h").hover(function() { 
      //alert(closedGif) 
      $(this).fadeOut(function(){ 
       $(this).attr("src", closedGif_l); 
       $(this).fadeIn(150); 
      }); 
     }, 
     function() { 
      // alert($(this).attr("src")); 
      $(this).fadeOut(function(){ 
       $(this).attr("src", openGif_l); 
       $(this).fadeIn(150); 
      }); 
     }); 

    }); 

Answer 3

太多的代碼和太多的如果有許多圖像與相同的行爲恕我直言做。 嘗試使用CSS轉換和平坦的JavaScript，如果你想使用jQuery來改變類使用 $（...）。toggleClass（...）。

Answer 4

正如我在上面的評論中所說的，我認爲.stop()應該解決眼前的問題。

爲了保持代碼的緊湊，你可以考慮大意如下安排的：

$(function() { 
    var srcArr = [ 
     {jq: $(".twitter_h"), over: "twitter.png", out: "follow1.png"}, 
     {jq: $(".linkedin_h"), over: "linkedin.png", out: "connect1.png"} 
     //additional lines here 
    ]; 

    $.each(srcArr, function(i, srcObj) { 
     obj.mouseover = srcObj.jq.attr("src"); 
     obj.mouseout = srcObj.mouseover.replace(srcObj.over, srcObj.out); 
     obj.jq.on('mouseenter mouseleave', function(e) { 
      var $this = $(this).stop().fadeOut(function() { 
       $this.attr("src", obj[e.type]); 
       $this.fadeIn(150); 
      }); 
     }); 
    } 
}); 

未經檢驗

要處理更多的圖像，只需添加線陣列srcArr。