0

我有多个图像。当我将鼠标悬停在每个图像上时，它会更改为另一个图像，并且在鼠标移出时会返回到其先前的图像。问题在于，当我们对每个图像快速执行此过程时，每个图像都完好无损地保留在其悬停图像上，但无法恢复到其先前的图像。但是当我慢慢地这样做时，效果和功能正常工作。我只为两个图像提供以下代码片段。请帮我解决这个问题。对不起我写得不好的英语。

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>

查询部分

<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);
       });
   });

});
4

4 回答 4

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);
           });
       });

    });
于 2012-12-31T11:23:44.503 回答
0

如果有许多具有相同行为的图像恕我直言，则代码过多且要做的事情太多。尝试使用 CSS 过渡和平面 javascript，如果您想使用 jquery 更改类，请使用 $(...).toggleClass(...)。

于 2012-12-31T14:00:00.313 回答
0

您可以使用方便的方法绑定鼠标进入和鼠标离开事件，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);
    });
});​
于 2012-12-31T11:14:11.470 回答
0

正如我在上面的评论中所说，我认为.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);
            });
        });
    }
});

未经测试

要处理其他图像，只需将行添加到 array srcArr。

于 2013-01-01T07:32:49.557 回答