Question

我在mousemove中遇到了平滑fadeIn和fadeOut的问题...我正在做一些关于top元素下的计算，并根据这些计算我想fadeIn()或fadeOut()工具提示。问题是，当移动鼠标时，事件正在每隔几毫秒拍摄一次。

这种情况看起来像这样：

我移动鼠标，隐藏工具提示。突然，鼠标指针位于应触发fadeIn（）的元素顶部，但此元素不是触发器，因为它位于其他元素的后面。所以我需要从mousemove拍摄fadeIn()。但是，当我拍摄它时，每隔几毫秒，它就不起作用，或者工作数百万次。但一般情况下，它不会......只要我移动鼠标，动画就会卡住，因为fadeIn（）会被重新调用。我真的厌倦了这个，试着把它修好5个小时而没有。

我试过了：

.stop()

fadeIn()

fadeOut() ...但我得到的唯一可见效果是它看起来像show()，因为stop(true,true)只需删除队列并导致上一个动画结束。所以，哇！它显示......怎么......很棒......很棒：/
使用:visibe选择器到fadeOut()和:not(:visible)到fadeIn() ......好吧......那当然没有太大变化，用stop()它刚刚离开半透明工具提示
使用rel属性来定义fadeOut()已经拍摄，不应再拍了......更糟糕的是，因为它总是在fadeOut() <之后没有回来/ LI>
要获得一些重置和事情，但是当我没有解决这个问题时我无法休息 - 这太烦人了！

我想知道是否还有人读到这个......我不会。

那么如何将fadeOut()，fadeIn()事件限制为每次一次，这样当事件被mousemove触发时，它甚至会从动画中间平滑地淡入和淡出？

对于这个问题，我可能会得到-1000 ... doooh。

Answer 1

我建议您使用css代替。你失去了一点兼容性（最值得注意的是旧的IE），但它更简单，运行得更顺畅。

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

编辑：

在这种情况下使用css是没有用的，因为正如我所说的那样，事件不会被最顶层触发... stop（true，true）与show（）完全相同，因为它每隔几毫秒被调用一次，曾经足以阻止淡化效果。

在这种情况下，在事件处理程序内的fading-element上设置/取消设置一个类。让css为你工作。

E.g：

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

Answer 2

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

Answer 3

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

TIMER='';
function onmove()
{
  if(TIMER)
  clearTimeout(TIMER);
  else
  TIMER = setTimeout(function(){

  // use yor code here eg. $('whteverID').fadeIn();

  },10)

}

mousemove上的.fadeIn（）/ fadeOut（）

3 个答案: