[英]Delay slideDown()/slideUp() - jquery dropdown
我正在創建我正在創建的下拉菜單,我希望延遲約250毫秒,以便在有人快速滾動按鈕時不會觸發該下拉菜單。
這是我當前的代碼。 我嘗試使用delay()方法,但效果不佳。
$(".deltaDrop").hover(function(){
$('.deltaDrop ul').stop(false,true).slideDown(250);
$('.delta').css('background-position','-61px -70px');
},function(){
$('.deltaDrop ul').stop(false,true).slideUp(450);
$('.delta').css('background-position','-61px 0');
});
謝謝
var timer;
timer = setTimeout(function () {
-- Your code goes here!
}, 250);
然后,您可以像這樣使用clearTimeout()函數。
clearTimeout(timer);
這應該工作。
$(".deltaDrop").hover(function(){
$('.deltaDrop ul').stop(false,true).hide(1).delay(250).slideDown();
$('.delta').css('background-position','-61px -70px');
},function(){
$('.deltaDrop ul').stop(false,true).show(1).delay(450).slideUp();
$('.delta').css('background-position','-61px 0');
});
.delay僅在處理動畫隊列時有效。 不帶參數的.show()
.hide()
和.show()
不會與動畫隊列交互。 通過添加.hide(1)
和.show(1)
的前.delay()
使得滑動動畫等待隊列中。
setTimeout(function() {
$('.deltaDrop ul').slideDown()
}, 5000);
未經測試,未經重構:
$(".deltaDrop")
.hover(
function()
{
var timeout = $(this).data('deltadrop-timeout');
if(!timeout)
{
timeout =
setTimeout(
function()
{
$('.deltaDrop ul').stop(false,true).slideDown(250);
$('.delta').css('background-position','-61px -70px');
$('.deltaDrop').data('deltadrop-timeout', false);
},
250
);
$(this).data('deltadrop-timeout', timeout);
}
},
function()
{
var timeout = $(this).data('deltadrop-timeout');
if(!!timeout)
{
clearTimeout(timeout);
$('.deltaDrop').data('deltadrop-timeout', false);
}
else
{
$('.deltaDrop ul').stop(false,true).slideUp(450);
$('.delta').css('background-position','-61px 0');
}
}
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.