鼠标移出时无法结束 jQuery 淡入淡出答案

【问题标题】：Can't end jQuery fade on mouseout鼠标移出时无法结束 jQuery 淡入淡出
【发布时间】：2011-06-17 07:19:36
【问题描述】：

我有一个简单的画廊风格链接设置，使用悬停时的图像交换，我想淡出。我现在在使用`

.stop().hide().FadeTo("slow",1);`

通过将鼠标悬停在其中一个上触发的图像淡入左边的链接，这是一个测试站点，看看我在说什么

testsite00.hostoi.com

我不知道如何在鼠标移出时结束淡入淡出。我正在尝试在链接之间创建无缝淡入淡出，但淡入淡出在鼠标移出时重复。我尝试了 .stop() 和 .hide() 的多种组合，但似乎无法阻止效果的执行。有任何想法吗？提前致谢。

jQuery:

$(document).ready(function() {
// Image swap on hover
$("#gallery ul li img").hover(function(){   
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''))
  function() { //mouseenter handler 
        $(this).stop().fadeTo("slow",0.5);
  }
  function (){ //mouseleave handler 
        $(this).stop().fadeTo("slow",1.0);
    }
});

HTML：

<div id="gallery">
  <img src="images/gallery/home.png" alt="" id="main-img" />
   <ul>
     <li class="home"><img src="images/gallery/thumb/home.png" alt="" /></li>
     <li class="about"><img src="images/gallery/thumb/about us.png" alt="" /></li>
     <li class="contact"><img src="images/gallery/thumb/Contact Us.png" alt="" /></li>
     <li class="services"><img src="images/gallery/thumb/Services.png" alt="" /></li>
   </ul>
</div>

【问题讨论】：

标签： jquery mousehover jquery-hover

【解决方案1】：

将 true 传递给 stop 调用以清除动画提示，或 true、true 以清除队列并立即完成动画：

.stop(true, true)

此外，您应该将两个函数传递给悬停处理程序 - 在 mouseenter 上发生什么，然后在 mouseleave 上发生什么 - 如果您希望它重新出现（或消失 - 无论所需的行为是什么），那应该进入第二个函数.

  $("#gallery ul li img").mouseenter(function(){
    var currentImg = $('#main-img').attr('src');
    var targetImg = $('this').attr('src').replace('thumb/', '');
    if (currentImg !== targetImg) {
      $('#main-img')
        .stop(true)
        .fadeTo(0,0)
        .attr('src', targetImg)
        .fadeTo('normal', 1);
    }
  });

因此，首先检查悬停的图像是否还不是大图像的缩略图 - 无需在此处执行淡入淡出动画。如果不是，则停止并清除动画队列（以防止动画在快速悬停时堆积），立即将当前大图淡化为 0 不透明度（使其不可见），将大图更改为缩略图所代表的，然后淡入大画面。淡入速度当前设置为“正常”，但如果您想尝试一下，这可以是“慢”、“快”或某个毫秒值。悬停功能已不复存在，因为您在 mouseleave 上不需要任何行为。

【讨论】：

谢谢，我刚刚用我认为你的意思更新了我的评论。它似乎没有工作:(
谢谢您，先生，这对我很有帮助，我仍然是 java-script 和 jQuery 的菜鸟。 $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')) 实际上是我想要淡入淡出的图像，我应该把你的代码放在这里吗？再次感谢。
这是我使用的代码designchemical.com/blog/index.php/jquery/…。需要淡化的图片URL是通过获取缩略图URL并去掉“/thumb”得到的
好的，我知道是什么造成了混乱——当他们只需要鼠标输入时，他们不必要地使用了悬停。我是否正确理解您想要做同样的事情，但只是在缩略图上添加一个淡入淡出，当您停止将鼠标悬停在缩略图上时该淡入淡出？
是的，基本上我拥有的是 4 个拇指和 4 个大图像。当相应的拇指悬停时，较大的图像应该淡入。当链接悬停时淡入很好，但是当我将鼠标移出链接时，淡入重复导致双重效果，这不是什么大问题，但如果只有淡入会更好看。大声笑这有什么意义?我将再次加载测试站点。

【解决方案2】：

不确定，但您可能对mouseout 的实际作用存在普遍误解。由于冒泡，事件也会触发子元素，这不是很直观。

http://www.quirksmode.org/dom/events/mouseover.html

试试mouseleave 看看是否可行。

【讨论】：