0

我在 mousemove 中遇到了平滑淡入和淡出的问题...我正在对顶部元素下的内容进行一些计算，并基于这些计算我想要fadeIn()或fadeOut()工具提示。问题是当移动鼠标时，每隔几毫秒就会触发一次事件。

情况如下所示：

我移动鼠标，工具提示被隐藏。突然鼠标指针在应该触发fadeIn()的元素之上，但这个元素不是触发器，因为它在其他一些元素的后面。所以我需要fadeIn()从mousemove拍摄。但是，当我拍摄它时，每隔几毫秒，它就不起作用，或者工作了数百万次。但一般来说，它不会......只要我移动鼠标，动画就会卡住，因为 fadeIn() 被再次调用。我真的厌倦了这个，试图修复它大约 5 个小时，但一无所获。

我试过了：

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

我想知道是否有人读过这个……我不会。

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

我可能会-1000回答这个问题......杜哦。

4

3 回答 3

1

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

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

编辑：

在这种情况下使用 css 没有用，因为正如我所说，事件不是由最顶层触发的...... stop(true,true) 的工作方式与 show() 完全相同，因为它每隔几毫秒调用一次，一次是足以停止淡入淡出效果。

在这种情况下，在事件处理程序内的 fading-element 上设置/取消设置一个类。让 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>
于 2013-09-02T10:24:12.377 回答
0

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

于 2013-09-02T10:22:18.490 回答
0

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

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

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

  },10)

}
于 2013-09-02T10:24:21.597 回答