2012-07-16 103 views
0

我有以下代码滚动表的滚动条jQuery的延迟/暂停动画

$('.myTable').animate({ 
    scrollTop: myPositon 
}, 45000, function() { 

}); 

现在我有以下的事件监听滚动条位置

$('.myTable').bind('scroll', function() { 
    //if the scroll bar reaches certain position 
    //pause the scrolling for 5 seconds 

}); 

我的代码检查滚动条是否到达特定位置,问题是如何在绑定函数中暂停滚动/或动画5秒钟,然后自动恢复动画?

我知道有延迟和clearQueue。但调用:

$('.myTable').delay(5000) or $('.myTable').clearQueue似乎有什么影响

+0

你想使该表不可滚动?只需删除溢出滚动条:隐藏 – Bergi 2012-07-16 17:12:53

+0

你可以在jsfiddle或jsbin中提供测试用例吗? – 2012-07-16 17:12:54

+0

而不是暂停和恢复动画,只是动画第一步,暂停5秒,然后为下一步做一个新的动画?还有一个'step'选项,您可以指定动画在回放过程中进行回调 – MrOBrian 2012-07-16 17:20:30

回答

0

可能低于HTML解决您的问题

<html> 
    <head> 
     <style> 
      div { 
       position: absolute; 
       background-color: #abc; 
       left: 0px; 
       top:30px; 
       width: 60px; 
       height: 60px; 
       margin: 5px; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 

    <body> 
     <button id="go">Go</button> 
     <button id="stop">STOP!</button> 
     <button id="back">Back</button> 
     <div class="block"></div> 
     <script> 
      /* Start animation */ 
      $("#go").click(function() { 
       $(".block").animate({ 
        left: '+=100px' 
       }, 2000); 
      }); 

      /* Stop animation when button is clicked */ 
      $("#stop").click(function() { 
       $(".block").stop(); 
       setTimeout(function() { 
        $(".block").animate({ 
         left: '+=100px' 
        }, 2000) 
       }, 1000); 
      }); 

      /* Start animation in the opposite direction */ 
      $("#back").click(function() { 
       $(".block").animate({ 
        left: '-=100px' 
       }, 2000); 
      }); 
     </script> 
    </body> 
</html>