1

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

.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>
4

2 回答 2

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

于 2011-06-17T07:21:15.487 回答
0

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

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

试试看mouseleave是否有效。

于 2011-06-17T07:23:30.730 回答