jQuery：淡入/淡出+动画元素
我正在使用jQuery淡入/淡出一些元素并改变其他元素的不透明度。
$(function(){ $('.image').each(function() { $(this).hover( function() { $(this).stop().animate({ opacity: 0.3 }, 'slow'); $(this).siblings().fadeIn('slow'); }, function() { $(this).stop().animate({ opacity: 1 }, 'slow'); $(this).siblings().fadeOut('slow'); }) }); }); 您可以在http://projects.klavina.com/stackoverflow/01/上看到完整的代码（我也在页面上使用jQuery Masonry插件）。
我是JS / jQuery的新手，上面的代码不能正常工作，除非我慢慢地将.image元素转移。 当我更快地移动元素时，即使我已经移动了另一个元素，图像上的字幕也会显示出来。 我怎么能删除它？ 即只有当我还在徘徊那个特定元素时，字幕才会淡入。
示例站点上的第一个图像具有“z-index：100;” 对于标题，所以我可以使文本叠加完全不透明。 理想情况下，我会有“z-index：100;” 对于所有标题，但这使得徘徊工作更加糟糕。
此外，淡入/淡出看起来在IE中失真。 我该如何解决这个问题？ 我确实在另一个页面上使用了不透明度更改，并通过在元素中添加白色背景来修复IE错误，但我不能在这里做到（因为我在下面有一张照片）。
谢谢！
您的问题的核心原因是除了 $(this).stop() （您已经拥有） 之外 ，还需要调用.siblings().stop() ）。
解决之后，你会看到一个新问题，你的标题最初可以正常工作，但是一旦重复被鼠标覆盖，它们就会开始淡入淡出（最终，它们会完全消失，直到你重新加载页）。 这是由于.fadeIn()与.fadeOut()结合使用的.fadeOut() – fadeIn()并不总是淡入opacity:1 – 相反，它淡入到当时应用的任何不透明度之前调用了fadeOut() 。
要解决这个问题，你可以使用animate({opacity:1},'slow')代替fadeIn('slow') – 或者你可以使用更简洁（更清晰） .fadeTo('slow',1) （ docs ）。 （注意，与其他动画function相比，fadeTo上的参数顺序不同 – 持续时间先到，然后是你想要淡入的值）。
当然，您也可以使用fadeTo()代替您的其他不透明度动画 – 尽管使用animate()肯定没有任何问题 – 两者是等效的。 （当然，如果你想同时操作多个css属性，你需要animate() 。）
当这一切结合在一起时，它可能看起来像这样：
$(function() { $('.image').each(function() { $(this).hover( function() { $(this).stop().fadeTo('slow',0.3) .siblings().stop().fadeTo('slow',1); }, function() { $(this).stop().fadeTo('slow',1) .siblings().stop().fadeTo('slow',0); }); }); });
你可以在jsFiddle看到这段代码： http ： //jsfiddle.net/coltrane/XstpE/
（注意：该示例取决于与上面的原始post一起使用的托管资源，因此如果这些资源被移动或变得不可用，它将无法工作）。
另请注意：在上面的示例中，我已经包含了.each()的使用，就像您在原始示例中所做的那样，但我想指出它实际上没有必要。
以下是等效的（通常被认为是“更好”的jQuery技术）：
$(function() { $('.image').hover(function() { $(this).stop().fadeTo('slow', 0.3) .siblings().stop().fadeTo('slow', 1); }, function() { $(this).stop().fadeTo('slow', 1) .siblings().stop().fadeTo('slow', 0); }); });
将事件处理程序应用于多元素集时，jQuery会自动绑定集合中每个元素的相同处理程序。 （我已经在jsFiddle（上面链接）更新了我的示例，以显示没有 each()的代码。
编辑
OP指出将鼠标hover在标题上（位于图像顶部）会导致mouseleave处理程序触发，从而导致执行转出操作。 所需的行为是让标题不触发推出。
出现此问题是因为标题“阴影”图像，并且hover()应用于图像。 当鼠标滚过标题时，它不再出现在图像上（它位于标题上），因此浏览器会在图像上触发鼠标左键。 同样的情况也会引发各种其他微妙的问题 – 特别是当你添加更复杂的内容时。
为了解决这个问题，我建议您只需将hover()向上一级（对于保存图像和标题的容器），而不是直接将其应用于图像。 在这种情况下，容器是$('.entry') 。 代码会像这样改变：
$(function() { $('.entry').hover(function() { $('.image',this).stop().fadeTo('slow', 0.3) .siblings().stop().fadeTo('slow', 1); }, function() { $('.image',this).stop().fadeTo('slow', 1) .siblings().stop().fadeTo('slow', 0); }); });
这是jsFiddle的新版本
不确定“慢”参数在你的动画函数中意味着多长时间。 尝试将其调整为“快速”或甚至提供数字值（以毫秒为单位），看看是否有帮助。
要在鼠标离开时停止元素上的动画：
$('.image').mouseleave(function() { $(this).stop(); });
尝试使用mouseenter（）和mouseleave（）而不是hover（）。
$(function(){ $('.image').each(function() { $(this).mouseenter( function() { $(this).stop().animate({ opacity: 0.3 }, 'slow'); $(this).siblings().fadeIn('slow'); }) .mouseleave( function() { $(this).stop().animate({ opacity: 1 }, 'slow'); $(this).siblings().fadeOut('slow'); }); }); });