Question

我需要帮助。我可以通过单击按钮打开事件，但无法弄清楚如何通过再次单击该按钮将其关闭。此外，我似乎无法获得动画速度和缓和工作。有什么建议？（我正在学习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>

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

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

1 个答案: