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

Question

I have a bunch of colored areas and when I enter any of them, I want the text to fade out. When I'm leaving the colored area, I want the text to fade in. This far, it's easy. The problem arises when I leave an area and enter an adjacent one.

If I only toggleIn() and toggleOut(), it works, but the fading effect makes the text appear and then re-disappear again, which looks stupid.

The extra problem is that the areas can't be placed in a single holder because they are not rectangularly positioned (and, in fact, it's parts of a SVG based pie chart drawn with D3).

I've been testing an external variable to keep track in the entry is made from outside of all areas or from outside of this but inside of another, adjacent area). Didn't quite managed to work it out.

How to make it happen in this fiddle?

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

Answer 1

The fadeIn() and fadeOut() functions can take an options parameter. One of the options is queue. If you set that to false on the fadeOut(), then it will interrupt the fade in animation. You won't see the full opacity text when you move between hover targets.

$(".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>

Update

There seems to be an issue with jQuery's fadeIn() and fadeOut() functions where they get confused by mouseenter and mouseleave events that are quick in succession. Switching to using the animate() function directly seems to fix the problem though.

$(".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>