显示带时间延迟的滚动按钮

Question

我有一个div，滚动时会显示一个按钮。我希望此按钮仅在最后一次滚动后显示2秒钟。我的脚本中出现了一个我无法弄清的故障。有时会显示2秒钟，有时会更少，有时会立即隐藏。

我想的问题是，它只能从第一滚动计算，每个滚动之后，直至过期不重置这个计时器。如果定时器到期，则滚动再次显示。

$("#layout-main").live('scroll',function(){ 
$("#main-totop").show(); 
}); 
$("#main-totop").live('click',function(){ 
mainapi.scrollTo(0,0); 
setTimeout(function(){ 
    $('#main-totop').hide(); 
}, 2000); 
}); 

Answer 1

这应该有效。

$("#layout-main").live('scroll',function(){ 
    $("#main-totop").stop().show(0).delay(2000).hide(0); 
}); 
$("#main-totop").live('click',function(){ 
    mainapi.scrollTo(0,0); 
    $('#main-totop').hide(); 
}); 

Answer 2

您应该.promise().done()尝试，我建议你使用.on()因为.live()是been removed in jQuery version 1.9.0+

$("#layout-main").on('click', '#main-totop', function(){ 
    mainapi.scrollTo(0,0).promise().done(function(){ 
     setTimeout(function(){ 
      $(this).hide(); 
     }, 2000); 
    }); 
}); 

，或者你可以尝试，因为这：

$("#layout-main").on('click', '#main-totop', function(){ 
    mainapi.scrollTo(0,0).promise().done(function(){ 
     $(this).delay(2000).hide(); 
    }); 
}); 

Answer 3

你的代码是不能代表什么你描述。

它说：当你滚动＃布局主要的＃主totop元素显示。 如果点击，然后滚动到顶部，隐藏2秒后。

从你的描述你想要的按钮（可能＃主totop）只出现在最后滚动后2秒钟，然后躲起来。

如果我是正确的，那么你需要的是这样的：

var mytimer; 
$("#layout-main").live('scroll',function(){ 
    clearTimeout(mytimer); 
    $('#main-totop').show(); 
    mytimer = setTimeout(function(){ 
     $('#main-totop').hide(); 
    }, 2000); 
}); 
$("#main-totop").live('click',function(){ 
mainapi.scrollTo(0,0); 
});