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

Question

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

如果我只toggleIn()和toggleOut()，它可以工作，但是淡入淡出的效果使文本出现然后重新-又消失了，看起来很蠢

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

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

如何在 this fiddle 中实现？

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

Answer 1

您需要的是在鼠标离开元素后延迟检查鼠标。请参阅我的示例，使用 isHover 变量，使用 setTimeout()

延迟 300ms

更新： 将延迟缩短为 50ms，假设彩色区域并排。

var isHover = false;
$(".dragon")
  .on("mouseenter", function(target) {
    isHover = true;
    checkHover();
  })
  .on("mouseleave", function(target) {
    isHover = false;
    setTimeout(function(){ checkHover(); }, 50);
  });

function checkHover() {
  if (isHover) {
   $('#indicator').fadeOut();
  } else {
    $('#indicator').fadeIn();
  }
}

div {
  width: 50px;
  height: 50px;
  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>

Answer 2

当你从一个龙区到另一个龙区时，第一个的mouseleave()事件会触发，第二个的mouseenter()事件也会触发。这就是它显示文本并再次隐藏它的原因。这是我通过更新你的 jsfiddle 解决的问题。

正如我从你的问题中了解到的，当用户进入“.dragon”区域时你想要隐藏文本。当从“.dragon”元素传递到另一个元素而不是仅仅显示和隐藏文本时，您希望文本保持隐藏状态。

我能想到的一个解决方案是在文档就绪函数中，您可以为“.dragon”元素的右下角创建两个全局变量。假设变量是（根据您的 Jsfiddle 的大小）；

var globalX = 200;
var globalY = 400;

然后您将淡入淡出功能放入 mousemove() 事件中。

$('body').mousemove(function(event){
    if(event.pageY > 400 || event.pageX > 200){
        $("#indicator").fadeIn();
    }
    else{
        $("#indicator").fadeOut();
    }
});

Answer 3

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>

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

How to fade in and out a tag when entering a control in a set from outside of it?

javascript

jquery

css

svg

fade