我有一个信息框,当鼠标悬停在连接到该信息框的箭头上时,它会滑动显示。请参阅我进一步链接的 jsfiddle 以获取更多见解。
我遇到的问题是它有点滞后。它随心所欲地来回跳跃,这让我很烦恼。我做了一些研究,发现 .stop(true, false)
是把事情搞砸的事情,但你也不能没有它。不过还没有找到任何顺利的解决方案......
如果可能的话,我希望...
...悬停时,即使鼠标离开,也可以完全动画化。
...当
#infoboxArrow
悬停时动画,然后当鼠标离开其父级#infocontainer
时动画回来。
$('#infoboxArrow').hover(function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 250
}, 600);
}, function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
最佳答案
尝试监听 mouseenter
和 mouseleave
事件而不是 hover
:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
另请注意,您不需要该图像。而且您将 em
单位与 px
混合在一起,因此如果字体大小发生变化,您的布局可能会中断。考虑这段代码:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position: fixed;
height: 28em;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
position: relative;
top: 50%;
margin-top: -59px;
border: 59px solid #FFC0CB;
border-right: 100px solid #000000;
border-left: none;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 100%;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id="infoboxArrow" class="slideOutTab"></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
关于Javascript:悬停时滞后;动画幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26823329/