.fadeIn() / fadeOut() on mousemove

.fadeIn() / fadeOut() on mousemove

本文关键字：mousemove on fadeIn fadeOut      更新时间：2023-09-26

我在mousemove中遇到了平滑fadeIn和fadeOut的问题。。。我正在做一些关于顶部元素下的内容的计算，基于这些计算，我想使用fadeIn()或fadeOut()工具提示。问题是，当移动鼠标时，事件每隔几毫秒就会被拍摄一次。

定位看起来是这样的：

我移动鼠标，工具提示被隐藏。突然鼠标指针出现在应该触发fadeIn（）的元素的顶部，但这个元素不是触发器，因为它在其他元素的后面。所以我需要用鼠标移动来拍摄fadeIn()。但是，当我每隔几毫秒拍摄一次时，它就不起作用，或者说起了一百万次作用。但一般来说，它不会。。。只要我移动鼠标，动画就会停滞，因为fadeIn（）会被再次调用。我真的对此感到厌倦，试着修复了大约5个小时，但一无所获。

我试过：

  1. 在fadeIn()/fadeOut()之前的.stop()在不同配置中。。。但我得到的唯一可见效果是它看起来像show()，因为stop(true,true)只是删除了队列并导致最后一个动画的结束。哇！这是表演。。。怎样eghn。。。很棒：/
  2. 使用:visibe选择器对fadeOut()和:not(:visible)对fadeIn()。。。好当然，这并没有太大变化，stop()只是留下了半透明的工具提示
  3. 使用rel属性来定义fadeOut()已经拍摄并且不应该再拍摄。。。更糟糕的想法是，因为它在总fadeOut()之后根本没有回来
  4. 为了得到一些重置之类的东西，但当我没有解决这个问题时，我无法休息——这太烦人了

我想知道是否有人读过这篇文章。。。我不会的。

那么，如何将fadeOut()、fadeIn()事件限制为每次一个，以便在鼠标移动触发事件时，即使从动画中间也能平滑地淡入淡出？

我可能会得到这个问题的-1000。。。doooh。

我建议您使用css。你失去了一点兼容性（最明显的是旧的IE），但它更简单，运行也更流畅。

例如，在:hover伪类中定义opacity，然后使用您选择的时间定义transition属性。

编辑：

在这种情况下使用css没有任何用处，因为正如我所说，事件不是由最顶层触发的。。。stop（true，true）的工作原理与show（）完全相同，因为它每隔几毫秒调用一次，一次就足以停止渐变效果。

在这种情况下，在事件处理程序内的淡入元素上设置/取消设置一个类。让css为您做这项工作。

例如：

<style>
  #tooltip { opacity:0 ; transition:opacity 1s linear }
  #tooltip.enabled { opacity:1 }
</style>
<div class="has-tooltip">Foo</div>
<div id="tooltip">Tooltip</div>
<script>
  $(".has-tooltip")
    .on("mouseenter", function() { $("#tooltip").addClass("enabled") })
    .on("mouseleave", function() { $("#tooltip").removeClass("enabled") })
</script>

您可以尝试在FadeIn/fadeOut之前取消绑定事件，并在动画完成后再次绑定（在完整功能中）。

试试这个，在鼠标移动时调用这个函数

TIMER='';
function onmove()
{
  if(TIMER)
  clearTimeout(TIMER);
  else
  TIMER = setTimeout(function(){
  // use yor code here eg. $('whteverID').fadeIn();
  },10)
}
相关文章：