[英]jQuery slideDown & then slideUp on timer
我有一个简单的.slideDown
函数:
$globalTabs.find('.seeMore a').live("click", function(){
$globalTabs.find(".allTabs").slideDown('slow');
});
当用户单击.allTabs
的<a>
时, .allTabs
执行.slideUp
。
我想做的是,如果用户没有单击.allTabs
任何内容,并且鼠标不再位于.allTabs
,则计时器启动以等待x时间,然后执行.slideUp
。 此外,如果鼠标在.slideUp
触发之前再次进入.allTabs
则计时器停止并在鼠标移出.allTabs
不确定如何处理。 任何帮助,将不胜感激。
基本标记:
<div class="allTabs">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
</div>
和:
<li class="seeMore"><a href="#">see more</a></li>
您可以使用setTimeout
和clearTimeout
函数,请注意不赞成使用live
方法,而可以使用on
方法。
var timeout;
$(document).on({
mouseenter: function(){
clearTimeout(timeout)
},
mouseleave: function(){
var $this = $(this)
timeout = setTimeout(function(){
$this.slideUp('slow')
}, 500)
},
}, ".allTabs")
更新:
var timeout;
$(document).delegate(".allTabs", "mouseenter", function() {
clearTimeout(timeout)
})
$(document).delegate(".allTabs", "mouseleave", function() {
var $this = $(this)
timeout = setTimeout(function() {
$this.slideUp('slow')
}, 1000)
})
设置一个计时器,以在slideup
的回调和slidedown
mouseout
.allTabs
。 取消将mouseover
在.allTabs
上的.allTabs
。
var $timer;
function hideAllTabs() {
$globalTabs.find(".allTabs").slideUp('slow');
}
$globalTabs.find('.seeMore a').live("click", function(){
$globalTabs.find(".allTabs").slideDown('slow', function() {
$timer = setTimeout(hideAllTabs, 1000);
});
});
$globalTabs.find(".allTabs").live("mouseout",function() {
$timer = setTimeout(hideAllTabs, 1000);
});
$globalTabs.find(".allTabs").live("mouseover",function() {
clearTimeout($timer);
});
尝试这种方式:
$(function() {
var $allTabs = $globalTabs.find(".allTabs");
var timer;
$globalTabs.find('.seeMore a').live("click", function(){
$allTabs.slideDown('slow');
});
$allTabs.mouseout(function(){
timer = setTimeout(function() {$allTabs.slideUp()}, 3000);
});
$allTabs.mouseover(function() {
clearTimeout(timer);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.