CODEWITHSUNDEEP
jquerysmooth-scrolling
stijns96
stijns96

Reputation: 144

How can I animate ease-in-out

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;

Upvotes: 4

Views: 8582

Answers (1)

Justinas
Justinas

Reputation: 43481

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>

Upvotes: 2

Related Questions