CODEWITHSUNDEEP
jquery
Aleksandar
Aleksandar

Reputation: 1766

avoid fadeout when moving mouse between two divs

When using show and hide moving the mouse between the two elements works fine. No flickering or such.

$(".blocka,.blockb").mouseenter(function(){
     $(".blockb").show();
});
$(".blocka,.blockb").mouseleave(function(){
     $(".blockb").hide();
});

http://jsfiddle.net/alewolf/07sramtq/1/

But, when using fadeIn and fadeOut the animation would always start between moving the mouse between the two elements. 

$(".blocka,.blockb").mouseenter(function(){
     $(".blockb").fadeIn();
});
$(".blocka,.blockb").mouseleave(function(){
     $(".blockb").fadeOut();
});

http://jsfiddle.net/alewolf/mLzejsvt/3/

I tried adding a timeout, but that didn't work.

The goal is that the green box only fades out if the mouse is being moved outside both elements.

Is there a simple way to solve this?

Upvotes: 0

Views: 35

Answers (2)

Aleksandar
Aleksandar

Reputation: 1766

I found the solution after a while of googling, and it is quite simple. (I had to go through quite a few iterations of my search terms).

Simply adding a stop() solves all of this perfectly. 

$(".blocka,.blockb").mouseenter(function(){
     $(".blockb").stop().fadeIn();
});
$(".blocka,.blockb").mouseleave(function(){
     $(".blockb").stop().fadeOut();
});

http://jsfiddle.net/alewolf/fts1qo09/13/

Upvotes: 0

Neel Bhanushali
Neel Bhanushali

Reputation: 782

This is happening because mouseenter event listener is also added to .blockb. You need to stop fadeIn animation when mouse enters blockb.

Check out the snippet.

$(".blocka").mouseenter(function(){
     $(".blockb").fadeIn();
});
$(".blocka,.blockb").mouseleave(function(){
     $(".blockb").fadeOut();
});

$(".blockb").mouseenter(function(){
     $(".blockb").stop();
});
.blocka{width:150px;height:50px;background:red;}
.blockb{width:250px;height:50px;background:green; display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<fieldset>
<div class="blocka"></div>
<div class="blockb"></div>
</fieldset>

Upvotes: 1

Related Questions