我怎样才能动画缓入缓出

Question

我的页面滚动流畅，但我希望它缓入缓出。有什么用吗？

这是我的代码的一部分。

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

Answer 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>

我怎样才能动画缓入缓出

How can I animate ease-in-out

jquery

smooth-scrolling