0

我需要帮助。我可以通过单击一个按钮来打开一个事件，但不知道如何通过再次单击同一个按钮来关闭它。此外，我似乎无法让动画速度和缓动工作。有什么建议么？（我正在学习 Jquery）

#services {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0;
    padding: 20px;
    position: absolute;
    right: -22%;
    top: 0;
    width: 22%;
    min-height: 100%;
    box-shadow: -2px 0 5px #000000;
    -moz-box-shadow: -2px 0 5px #000000;
    -webkit-box-shadow: -2px 0 5px #000000;
    overflow: auto;
}

<script>
    $(".btn-services").on('click', function(){
        $("#services").animate({right:'0%'}, 1000, 'linear');
    }); 
</script>
4

1 回答 1

0

您可以使用 Jquery .stop() ( http://api.jquery.com/stop/ ) 来停止动画。您可以将其与检查相结合，以查看它当前是否正在动画（代码未测试）：

$(".btn-services").on('click', function(){
  if( $("#services").is(':animated')) {
    $("#services").stop();
  } else {
    $("#services").animate({right:'0%'}, 1000, 'linear');
  }   
});

您可以使用切换而不是 if/else。

关于您关于动画速度和缓动的问题：

  • 目前在您的动画功能中，您将速度设置为 1000 毫秒，因此此动画将完成（在 1 秒内从右侧 -22% 移动到右侧 0%）。例如，您可以将其减慢到 3000，动画将需要 3 秒。
  • Jquery 中有两个默认的缓动函数：'swing' 和 'linear'。目前您正在使用“线性”，因此动画以恒定速率进行。对于其他缓动功能，您需要包含其他插件
于 2013-10-14T13:03:50.640 回答