HTML PART

Question

我有多张图片。当我鼠标悬停在每个图像上时，它将更改为另一个图像，并在mouseout上返回到其上一个图像。问题在于，当我们在每个图像上快速完成此过程时，每个图像都完好无损地覆盖其悬停图像但不会回到其先前的图像。但是当我慢慢地这样做时，效果和功能正常工作。我只为两张图片提供以下代码段。请帮帮我。抱歉我的英文不好。

HTML PART

<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（）方法指定当鼠标指针悬停在所选元素上时要运行的两个函数。

此方法会触发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 2

您可以使用便捷方法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 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中添加行。

Mouseenter和Mouseleave工作不顺畅

HTML PART

JQUERY PART

4 个答案: