.delay()不与slideUp()一起使用
.delay()不与slideUp()一起使用
提问于 2012-08-15 06:43:08
正如标题所说，由于某些原因，盒子在滑回之前不会延迟。现在，如果您将鼠标悬停在名为"#box“且类为".boxset”的div上，则会出现div "#slidebox“。#slidebox也有".boxset“类。如果你把鼠标从这两个div上移开，# slideUp将会被删除。在这方面，它工作得很好。
我希望在它返回之前有一个延迟，但由于某种原因，delay()不起作用。
关键的代码行位于hover()下的两个函数中的第二个函数中
即：
$('#slidebox').stop().delay(600).slideUp({ 有没有人能看出有什么不对劲？
非常感谢大家的帮助！
The jQuery
$('#slidebox').hide();
$('.boxset').hover(
function() {
$('#slidebox').stop().slideDown(
{
duration:600,
easing: "swing",
queue: false,
complete: function() {
$('#slidebox').removeAttr('style');} //End complete
} //End object literals
); // End slideDown
} // End first function
,
function() {
$('#slidebox').stop().delay(600).slideUp({
duration:600,
easing: "swing",
queue: false,
} // End object literals
); //End slideUp
} // End second function
); // End HoverHTML
<div id="box" class="boxset"></div>
<div id="slidebox" class="boxset"></div>CSS
#box {
width: 100%;
height: 35px;
background-color: orange;
drop-shadow: 2px 2px 1px rgba(0,0,0,.25);
border-radius: 10px 0px 10px 0px;
color: white;
diplay:block;
text-align: right;
}
#slidebox {
width:100%;
height: 100px;
background-color: rgba(23,34,1, .1);
border-radius: 10px 10px 0px 10px;
display: block;}回答 2
Stack Overflow用户
回答已采纳
发布于 2012-08-15 06:52:17
我认为在这种情况下，您希望使用setTimeout。
var timeOut;
$('.boxset').hover(
function() {
clearTimeout(timeOut);
$('#slidebox').stop().slideDown({
duration:600,
easing: "swing",
queue: false,
complete: function() {
$('#slidebox').removeAttr('style');} //End complete
});
},
function() {
$('#slidebox').stop();
timeOut=setTimeout(function(){
$('#slidebox').slideUp({
duration:600,
easing: "swing",
queue: false,
});
}, 600);
}Stack Overflow用户
发布于 2012-08-15 06:52:43
从JQuery文档中：
队列:一个布尔值，指示是否将动画放置在效果队列中。如果为false，动画将立即开始。从jQuery 1.7开始，队列选项还可以接受字符串，在这种情况下，动画将被添加到该字符串表示的队列中。
尝试在悬停时为handlerOut函数设置queue:true
更改Div元素的嵌套，并从内部div中删除"boxset“类，这样事件处理程序就不会多次触发。这应该可以修复不一致的行为。
<div id="box" class="boxset">
<div id="slidebox"></div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11961876
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号