我总共有九个链接,当有人将鼠标悬停在它们上时,每个链接都希望显示一个图像。
脚本运行良好,但是如果有人将鼠标悬停在它们上方,图像会徘徊并停留在屏幕上:它们不会隐藏。
这里是设置:
$('#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>
代替.fadeIn('0')
使用.show()
。
淡入超过0毫秒与立即显示基本上相同,除了“动画”开始前的延迟很短-您的.hide()
有时间在该动画开始之前触发。
因此它会隐藏它,然后淡入淡出:隐藏物已经被发射,因此不会再次发射=图像停留在屏幕上。
或者在.finish()
前使用.hide()
`$('#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>