How can I animate ease-in-out

Question

I have a smooth scroll on my page, but I want it ease-in-out. Is there something for it?

This is a part of my code.

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

You can do it without adding the JQuery UI library, see this answer: https://stackoverflow.com/a/34327497/2096769 — Chris Hayes, Jan 12 '21 at 23:36
this is much better than the setinterval solution as we don't need to add a condition to kill the setinterval — Vincent, Oct 13 '22 at 04:48

Justinas · Accepted Answer · 2018-06-07T07:16:15.477

jQuery has very basic animations. You need to load additionally jQuery UI to have esea-in-out animation.

$(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

1 Answers1