使用 Jquery 打开和关闭动画事件

【问题标题】：Turning an animation event on and off with Jquery使用 Jquery 打开和关闭动画事件
【发布时间】：2013-10-14 12:51:52
【问题描述】：

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

【问题讨论】：

标签： jquery jquery-ui jquery-animate jquery-on

【解决方案1】：

您可以使用 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'。目前您正在使用“线性”，因此动画以恒定速率进行。对于其他缓动功能，您需要包含其他插件

【讨论】：