Question

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

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

淡入鼠标悬停在其中一个上面的图像左边的链接，这是一个测试网站，看看我在说什么

testsite00.hostoi.com

我无法弄清楚如何在mouseout上结束淡出效果。我正在尝试在链接之间创建无缝淡入淡出但淡出在mouseout上重复。我尝试了.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>

Answer 1

将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上不需要任何行为。

Answer 2

不确定，但您可能会对mouseout真正做的事情产生共同的误解。由于冒泡，事件也触发了儿童元素，这不是非常直观的。

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

尝试mouseleave，看看是否有效。

无法在mouseout上结束jQuery淡入淡出

2 个答案: