在jquery中快速悬停时不隐藏

Posted

技术标签:

【中文标题】在jquery中快速悬停时不隐藏【英文标题】：Not Hiding when Hovering Quickly in jquery 【发布时间】：2020-08-17 06:38:56 【问题描述】：

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

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

这里是设置：

$('#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(););
.linksz-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>

【问题讨论】：

【参考方案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(););
.linksz-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>

【讨论】：

在 .hide() 前面添加 .finish() 就可以了。并感谢您修复代码！效果很好！

以上是关于在jquery中快速悬停时不隐藏的主要内容，如果未能解决你的问题，请参考以下文章

快速鼠标悬停/鼠标悬停的完整悬停动画持续时间？

快速悬停时jQuery animate（）序列乱序

悬停时不透明度的 CSS3 过渡不起作用

table中td超出内容隐藏，鼠标悬停全部显示(完整版，含js代码)

使用 Django + PostgreSQL 进行快速搜索

PostgreSQL版本快速升级