在jquery中快速悬停时不隐藏

Question

我总共有九个链接，当有人将鼠标悬停在它们上方时，我希望每个链接显示一张图片。

脚本运行良好，但如果有人将鼠标快速悬停在他们身上，图像会徘徊并停留在屏幕上：它们不会隐藏。

这里是设置：

$('#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>

Answer 1

用.show()代替.fadeIn('0')。

超过 0 毫秒的淡入与立即显示基本相同，不同之处在于 在“动画”开始之前有很短的延迟 - 您的 .hide() 有时间在动画开始之前触发。

所以它隐藏它然后淡入：隐藏已经触发所以不会再次触发 = 图像留在屏幕上。

或者在.hide()前面使用.finish()

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

表示首先完成/完成任何动画（例如 .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>

---

为了完整起见，您可以大幅减少代码：

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