显示具有延时的滚动按钮

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

您的代码并不代表您所描述的内容。

它说：当您在#layout main上滚动时，会显示#主totop元素。如果单击，则滚动到顶部，2秒钟后隐藏。

根据您的描述，您希望按钮（可能#main 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);
});