jQuery Hide/Show with Slide on Hover... 更好的方法来做到这一点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1105783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Hide/Show with Slide on Hover... better way to do this?
提问by Programmin Tool
Basically having some trouble with using Hover to hide or show an item.
基本上在使用 Hover 隐藏或显示项目时遇到一些麻烦。
The idea is simple, on hover show a div. When no longer hovering, hide it. Problem is if the mouse hovers over the div and leaves too quickly, the show/hide div will stay visible. I'm hoping this is something easily remedied and not a typical problem with the hover event.
这个想法很简单，悬停时显示一个 div。当不再悬停时，将其隐藏。问题是如果鼠标悬停在 div 上并离开得太快，显示/隐藏 div 将保持可见。我希望这是很容易解决的问题，而不是悬停事件的典型问题。
jQuery
(
function()
{
jQuery(".slideDiv").hide();
jQuery(".mainDiv").hover
(
function()
{
var children = jQuery(this).children(".slideDiv");
if (children.is(":hidden"))
{
children.show("slide", { direction: "left" }, 100);
}
},
function()
{
var children = jQuery(this).children(".slideDiv");
children.hide("slide", { direction: "left" }, 100);
}
);
}
);
Styles look like:
样式如下：
.mainDiv
{
margin:5px;
height:200px;
}
.slideDiv
{
background-color:Teal;
float:left;
height:200px;
position:absolute;
z-index:100;
}
And markup
和标记
<div class="mainDiv">
<div class="showDiv">
Hover me
</div>
<div class="slideDiv">
Do you see me?
</div>
</div>
<div class="clear"></div>
<div class="mainDiv">
<div class="showDiv">
Hover me too
</div>
<div class="slideDiv">
Do you see me now?
</div>
</div>
回答by redsquare
Use the hoverIntentplugin. This avoids anything being shown if the user simply passes the mouse over the elements, and avoids an unsightly chain of animations.
使用hoverIntent插件。如果用户只是将鼠标移到元素上，这将避免显示任何内容，并避免出现难看的动画链。
回答by Mottie
I tried your script and it did as you described. I tried removing the children.is(":hidden") from your script, but the problem still occurred.
我试过你的脚本，它按照你的描述做了。我尝试从您的脚本中删除 children.is(":hidden")，但问题仍然存在。
When I rewrote it the script the div never stays visible. So, it appears that the problem is with using jQuery's childreninstead of findto get to the object:
当我重写脚本时，div 永远不会保持可见。因此，问题似乎在于使用 jQuery 的子级而不是find来获取对象：
Still has problems:
还是有问题：
jQuery (
function(){
jQuery(".slideDiv").hide();
jQuery(".mainDiv").hover (
function() {
$(this).children(".slideDiv").show("slide", { direction: "left" }, 100);
},function(){
$(this).children(".slideDiv").hide("slide", { direction: "left" }, 100);
}
);
}
);
Works as intended:
按预期工作：
$(document).ready(function(){
$('.slideDiv').hide();
$('.mainDiv').hover(
function(){
$(this).find('.slideDiv').show('slide', { direction: 'left' }, 100)
},
function(){
$(this).find('.slideDiv').hide('slide', { direction: 'left' }, 100)
}
)
})
And yes, The hoverIntent plugin is nice :P
是的，hoverIntent 插件很好：P
