jQuery：淡入/淡出动画元素

3 回答

• 0

  您的问题的核心原因是除了 $(this).stop() （您已经拥有）之外，还需要调用 .siblings().stop() .

  在您修复之后，您已经反复进行了重复操作（最终，它们将完全消失，直到您重新加载页面） . 这是由于 .fadeIn() 与 .fadeOut() 结合使用的方式 - fadeIn() 并不总是淡入 opacity:1 - 相反，它会淡入到先前调用 fadeOut() 时应用的任何不透明度 .

  要解决这个问题，您可以使用 animate({opacity:1},'slow') 而不是 fadeIn('slow') - 或者您可以使用更简洁（更清晰） .fadeTo('slow',1) （docs） . （注意，与其他动画功能相比，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/
  （注意：该示例取决于与上述原始帖子一起使用的托管资源，因此如果这些资源被移动或变得不可用，它将无法工作） .

  ---

  另请注意：在上面的示例中，我已经包含了原始示例中使用的 .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() 的代码） .

  ---

  Edit

  OP指出，将鼠标悬停在 Headers 上（位于图像顶部）会导致 mouseleave 处理程序触发，从而导致执行转出操作 . 所需的行为是让 Headers 不触发推出 .

  出现此问题的原因是图像的 Headers "shadows"和 hover() 应用于图像 . 当鼠标滚过 Headers 时， Headers 上的 Headers 为's no longer on the image (it'，因此浏览器会在图像上触发鼠标左键 . 同样的情况也会引发各种其他微妙的问题 - 特别是当你添加更复杂的内容时 .

  要解决这个问题，我建议您只需将 hover() 向上一级（对于包含图像和 Headers 的容器），而不是直接将其应用于图像 . 在这种情况下，该容器是 $('.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);
      });
  });
  

  here is a new version of the jsFiddle

  回复于 2024-04-25T21:38:19+08:00
• 4

  不确定“慢”参数在你的动画功能中有多长时间 . 尝试将其调整为“快速”或甚至提供数字值（以毫秒为单位），看看是否有帮助 .

  要在鼠标离开时停止元素上的动画：

  $('.image').mouseleave(function() {
      $(this).stop();
  });
  

  回复于 2024-04-25T21:38:19+08:00
• 0

  尝试使用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');
          });
      });
  });
  

  回复于 2024-04-25T21:38:19+08:00