jquerycsshoverjquery-hovermousehover

Not Hiding when Hovering Quickly in jquery

I have a total of nine links that I want to each show an image when someone hovers over them.

the script is working fine, but if someone hovers their mouse very quick over them, the images linger and stay on the screen: they don't hide.

here is the setup:

$('#1-parent').hover(function(){$('#1-child').fadeIn('0');},function(){$('#1-child').hide();}); 
$('#2-parent').hover(function(){$('#2-child').fadeIn('0');},function(){$('#2-child').hide();}); 
$('#3-parent').hover(function(){$('#3-child').fadeIn('0');},function(){$('#3-child').hide();});
$('#4-parent').hover(function(){$('#4-child').fadeIn('0');},function(){$('#4-child').hide();}); 
$('#5-parent').hover(function(){$('#5-child').fadeIn('0');},function(){$('#5-child').hide();}); 
$('#6-parent').hover(function(){$('#6-child').fadeIn('0');},function(){$('#6-child').hide();}); 
$('#7-parent').hover(function(){$('#7-child').fadeIn('0');},function(){$('#7-child').hide();}); 
$('#8-parent').hover(function(){$('#8-child').fadeIn('0');},function(){$('#8-child').hide();}); 
$('#9-parent').hover(function(){$('#9-child').fadeIn('0');},function(){$('#9-child').hide();});
.links{z-index:1;}
.preview {display:none;}
.container {z-index:-10;
    position:absolute;top:0;left:0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid green;
    width: 100%;
    height: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="links">
<a id="1-parent">Link 1</a><br/>
<a id="2-parent">Link 2</a><br/>
<a id="3-parent">Link 3</a><br/>
<a id="4-parent">Link 1</a><br/>
<a id="5-parent">Link 2</a><br/>
<a id="6-parent">Link 3</a><br/>
<a id="7-parent">Link 1</a><br/>
<a id="8-parent">Link 2</a><br/>
<a id="9-parent">Link 3</a>
</div>


<div class="container">
<img class="preview" id="1-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="2-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="3-child" src="http://placehold.it/300x100/fff000" />
<img class="preview" id="4-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="5-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="6-child" src="http://placehold.it/300x100/fff000" />
<img class="preview" id="7-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="8-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="9-child" src="http://placehold.it/300x100/fff000" />
</div>

Solution

  • Instead of .fadeIn('0') use .show().

    Fade in over 0 ms is essentially the same as showing immediately, except that there's a very short delay before the "animation" starts - your .hide() has time to fire before that animation starts.

    So it hides it then fadesin: the hide has already fired so doesn't fire again = image stays on screen.

    Alternatively use .finish() in front of the .hide()

    `$('#1-child').finish().hide();`

    which says to finish/complete any animation first (such as .fadeIn())

    $('#1-parent').hover(function(){$('#1-child').show();},function(){$('#1-child').hide();}); 
$('#2-parent').hover(function(){$('#2-child').show();},function(){$('#2-child').hide();}); 
$('#3-parent').hover(function(){$('#3-child').show();},function(){$('#3-child').hide();});
$('#4-parent').hover(function(){$('#4-child').show();},function(){$('#4-child').hide();}); 
$('#5-parent').hover(function(){$('#5-child').show();},function(){$('#5-child').hide();}); 
$('#6-parent').hover(function(){$('#6-child').show();},function(){$('#6-child').hide();}); 
$('#7-parent').hover(function(){$('#7-child').show();},function(){$('#7-child').hide();}); 
$('#8-parent').hover(function(){$('#8-child').show();},function(){$('#8-child').hide();}); 
$('#9-parent').hover(function(){$('#9-child').show();},function(){$('#9-child').hide();});
    .links{z-index:1;}
.preview {display:none;}
.container {z-index:-10;
    position:absolute;top:0;left:0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid green;
    width: 100%;
    height: 100vw;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="links">
<a id="1-parent">Link 1</a><br/>
<a id="2-parent">Link 2</a><br/>
<a id="3-parent">Link 3</a><br/>
<a id="4-parent">Link 1</a><br/>
<a id="5-parent">Link 2</a><br/>
<a id="6-parent">Link 3</a><br/>
<a id="7-parent">Link 1</a><br/>
<a id="8-parent">Link 2</a><br/>
<a id="9-parent">Link 3</a>
</div>


<div class="container">
<img class="preview" id="1-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="2-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="3-child" src="http://placehold.it/300x100/fff000" />
<img class="preview" id="4-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="5-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="6-child" src="http://placehold.it/300x100/fff000" />
<img class="preview" id="7-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="8-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="9-child" src="http://placehold.it/300x100/fff000" />
</div>

    For completeness, you can reduce your code substantially:

    $('.links>a').hover(function() {
    $('.preview[data-id=' + $(this).data("id") + ']').show();
  },
  function() {
    $('.preview[data-id=' + $(this).data("id") + ']').hide();
  });
    .links {
  z-index: 1;
}

.preview {
  display: none;
}

.container {
  z-index: -10;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid green;
  width: 100%;
  height: 100vw;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="links">
  <a data-id="1">Link 1</a><br/>
  <a data-id="2">Link 2</a><br/>
  <a data-id="3">Link 3</a><br/>
  <a data-id="4">Link 1</a><br/>
  <a data-id="5">Link 2</a><br/>
  <a data-id="6">Link 3</a><br/>
  <a data-id="7">Link 1</a><br/>
  <a data-id="8">Link 2</a><br/>
  <a data-id="9">Link 3</a>
</div>


<div class="container">
  <img class="preview" data-id="1" src="http://placehold.it/300x300/fff000" />
  <img class="preview" data-id="2" src="http://placehold.it/300x500/ffD000" />
  <img class="preview" data-id="3" src="http://placehold.it/300x100/fff000" />
  <img class="preview" data-id="4" src="http://placehold.it/300x300/fff000" />
  <img class="preview" data-id="5" src="http://placehold.it/300x500/ffD000" />
  <img class="preview" data-id="6" src="http://placehold.it/300x100/fff000" />
  <img class="preview" data-id="7" src="http://placehold.it/300x300/fff000" />
  <img class="preview" data-id="8" src="http://placehold.it/300x500/ffD000" />
  <img class="preview" data-id="9" src="http://placehold.it/300x100/fff000" />
</div>