javascript - 从外部进入集合中的控件时如何淡入和淡出标签？

Question

我有一堆彩色区域，当我输入其中任何一个时，我希望文本淡出。当我离开彩色区域时，我希望文本淡入。这很容易。当我离开一个区域并进入相邻区域时，问题就出现了。

如果我只使用 toggleIn() 和 toggleOut()，它可以工作，但是淡入淡出的效果会使文本出现然后再次消失，这看起来很愚蠢。

额外的问题是这些区域不能放置在单个支架中，因为它们不是矩形定位的(事实上，它是用 D3 绘制的基于 SVG 的饼图的一部分)。

我一直在测试一个外部变量来跟踪条目是从所有区域外部创建的，还是从该区域外部但在另一个相邻区域内部创建的)。没能完全解决。

如何在 this fiddle 中实现它？

$(".dragon")
  .on("mouseenter", function(target) {
    $("#indicator").fadeOut();
  })
  .on("mouseleave", function(target) {
    $("#indicator").fadeIn();
  });

Answer 1

fadeIn() 和fadeOut() 函数可以接受一个选项参数。其中一个选项是 queue。如果您在 fadeOut() 上将其设置为 false，那么它将中断淡入动画。在悬停目标之间移动时，您不会看到完整的不透明度文本。

$(".dragon")
  .on("mouseenter", function(target) {
    $("#indicator").fadeOut({queue: false});
  })
  .on("mouseleave", function(target) {
    $("#indicator").fadeIn();
  });

div {
  width: 200px;
  height: 200px;
  text-align: center;
}

.uno {
  background-color: blue;
}

.duo {
  background-color: yellow;
}

#indicator {
  color: red;
  font-family: Tahoma;
  font-size: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragon uno"></div>
<div class="dragon duo"></div>

<div id="indicator"><hr>Enter the dragon!</div>

更新

jQuery 的 fadeIn() 和 fadeOut() 函数似乎存在问题，它们会被快速连续发生的 mouseenter 和 mouseleave 事件弄糊涂。不过，直接切换到使用 animate() 函数似乎可以解决问题。

$(".dragon")
  .on("mouseenter", function(target) {
    $("#indicator").animate({opacity: 0}, {queue: false});
  })
  .on("mouseleave", function(target) {
    $("#indicator").animate({opacity: 1});
  });

$(".dragon")
  .on("mouseenter", function(target) {
    $("#indicator").animate({opacity: 0}, {queue: false});
  })
  .on("mouseleave", function(target) {
    $("#indicator").animate({opacity: 1});
  });

div {
  width: 200px;
  height: 200px;
  text-align: center;
}

.uno {
  background-color: blue;
}

.duo {
  background-color: yellow;
}

#indicator {
  color: red;
  font-family: Tahoma;
  font-size: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragon uno"></div>
<div class="dragon duo"></div>

<div id="indicator"><hr>Enter the dragon!</div>