如何为缓入出动画答案

【问题标题】：How can I animate ease-in-out如何为缓入出动画
【发布时间】：2018-06-07 07:00:07
【问题描述】：

我的页面上有一个平滑的滚动条，但我希望它能够缓入出局。有什么好办法吗？

这是我的代码的一部分。

 $('html,body').animate({
   scrollTop: $(hash).offset().top - navHeight
 }, 1000);
 return false;

【问题讨论】：

不加JQuery UI库也可以，看这个答案：stackoverflow.com/a/34327497/2096769

标签： jquery smooth-scrolling

【解决方案1】：

jQuery 有非常基本的动画。您需要额外加载jQuery UI 才能拥有esea-in-out 动画。

$(document).on('click', '#sample', function () {
  $(this)
    .animate(
      {height: "hide"},
      2000,
      'easeInOutQuint'
    )
    .delay(800)
    .animate(
      {height: "show"},
      2000,
      'easeInOutQuint'
    );
});

#sample {
  width: 100px;
  height: 100px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="sample"></div>

【讨论】：