带有 jQuery 图像翻转效果的无休止的淡入淡出循环答案

【问题标题】：Endless fade looping with jQuery image rollover effect带有 jQuery 图像翻转效果的无休止的淡入淡出循环
【发布时间】：2011-04-12 18:21:26
【问题描述】：

我的意图是用漂亮的淡入淡出效果替换图像：我有一张图片 A 作为背景。鼠标悬停时，图像 B 淡入。鼠标移开时，图像 B 淡出，我们可以再次看到图像 A。我正在使用此代码：

<script type='text/javascript'>
    $(function() {
            $("img.fade")
                .mouseover(function() { 
                $(this).fadeOut(2000);                          
                })
                .mouseout(function() {
                $(this).fadeIn(2000);                                   
                });
    });     
</script>

但问题是当用户保持悬停时，它会继续循环（fadeIn、fadeOut、fadeIn、fadeOut..）。我希望它在褪色完成时保持不变。当用户鼠标移出时，我希望新的淡入淡出会发生。谢谢！

附言这是使用 2 张图像的工作代码。这是问题的不同解决方案，我在问题解决后添加了这个。

<script type='text/javascript'>
$(function() {

  $('img.fade').hover(function() {
    var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg";
    $(this)
      .animate({opacity:0},0)
      .attr('src',src)
      .stop()
      .animate({opacity:1},1000);
  }, function() {
    var src = $(this).attr("src").replace("_over", "");
    $(this)
      .animate({opacity:0},0)
      .attr('src',src)
      .stop()
      .animate({opacity:1},500);
  });
});
</script>

【问题讨论】：

.stop() api.jquery.com/stop 是解决你问题的好方法

标签： jquery fade rollover-effect

【解决方案1】：

试试这个代码：

 $(function() {
        $("img.fade")
            .mouseover(function() { 
            $(this).fadeTo('2000', 0);                          
            })
            .mouseout(function() {
            $(this).fadeTo(2000, 1);                                   
            });
});

问题是fadeOut() 函数将元素的display 属性设置为none，所以DOM 认为你的鼠标不再与元素交互，并调用fadeIn() 函数。它不断循环。 fadeTo 函数改变了不透明度，但它实际上并没有让图像走开。它需要两个参数，持续时间和不透明度。

【讨论】：

【解决方案2】：

在我看来，图像一旦淡出就会消失，这会触发 mouseout 功能。尝试将动画设置为 0.01 的不透明度。

【讨论】：

【解决方案3】：

$(function() {
  var img = ['imageA.jpg','imageB.jpg'] 
  $('img.fade').hover(function() {
    $(this)
      .animate({opacity:0},0)
      .attr('src',img[1])
      .stop()
      .animate({opacity:1},1000);
  }, function() {
    $(this)
      .animate({opacity:0},0)
      .attr('src',img[0])
      .stop()
      .animate({opacity:1},1000);
  });
});

你可以试试here

参考 : .hover() , .stop()

【讨论】：

最后我使用了 fadeTo 和背景图像，但您的解决方案也很好并且有效。我稍微更改了您的代码以允许使用页面中的所有图像 - 请查看我上面编辑的问题。

【解决方案4】：

如果您不想动态切换图像并且真的想继续使用背景图像，您可以利用事件冒泡...

HTML：

<div class="myClass" style="background: url(imageA.jpg);">
    <img src="imageB.jpg" />
</div>

jQuery：

$('.myClass').hover(function(){
    $(this).find('img').fadeOut(2000);
}, function(){
    $(this).find('img').fadeIn(2000);
})

未经测试，因此请告诉我们它是否有效。

【讨论】：

【解决方案5】：

对于其他也由

领导的人

Google+(Ignorance||rum) = me.

mouseenter + mouseleave 可能有助于解决您认为可能有效的奇怪的半循环行为，例如

var someElements = $('div.event-cell');

            someElements.mouseenter(function () {
                var targets= calEvents.not(this);
                targets.fadeTo(1000, 0.3);
            }).mouseleave(function () {
                var targets = someElements.not(this);
                targets.fadeTo(1000, 1);
            });

似乎 mouseover 和 mouseout 比您想象的更具包容性，例如mouseout 包括子元素。

I think = layman's opinion after rum :)

参见演示部分http://api.jquery.com/mouseover/

【讨论】：