How to change fading to easing?

Question

Hi guys I have the below code and I want to change that fading 'slow' into jquery easing: https://api.jqueryui.com/easings/ But I don't know how to do it, can you help me? I'm starting with javascript and jquery. thanks in advance, cheers! `

        $("#upClick").click(function(){
            $('html, body').animate({
                scrollTop: $('#scroll').offset().top
            }, 'slow');
        });

Code :

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="arrowdown">
  <button class="arrow">hi im a dropdow button</button>
</div>

<script type="text/javascript">
  $("button").click(function() {
    $('html, body').animate({
      scrollTop: $('text').offset().top
    }, 1500, 'easeOutExpo');
    // ----------^---- set here
  });
</script>
<div>
  <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
    human
  </p>
</div>
<div>
  <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
    human
  </p>
</div>
<div>
  <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
    human
  </p>
</div>
<div class="text">
  <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
    human
  </p>
</div>

Questions asking us to suggest, find or recommend a book, tool, software library, plug-in, **tutorial**, explain a technique or provide any other off-site resource are off-topic for Stack Overflow Stack Overflow — Paulie_D, Aug 05 '16 at 16:07

score 0 · Accepted Answer · edited May 23 '17 at 10:28

You can set easing value as 3rd parameter in jQuery animate() method.

$("#upClick").click(function(){
    $('html, body').animate({
        scrollTop: $('#scroll').offset().top
    }, 'slow','linear');
    // ----------^---- set here
});

UPDATE : Only swing and linear easing types are works with the jQuery library in order to use other include jQuery UI library. Check the documentation description of easing option:

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!---------^^^^^ include ui library ------------------------------------->
<div class="arrowdown">
  <button class="arrow">hi im a dropdow button</button>
</div>

<script type="text/javascript">
  $("button").click(function() {
    $('html, body').animate({
      scrollTop: $('.text').offset().top
    }, 1500, 'easeOutExpo');
    // ----------^---- set here
  });
</script>
<div>
  <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
    human
  </p>
</div>
<div>
  <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
    human
  </p>
</div>
<div>
  <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
    human
  </p>
</div>
<div class="text">
  <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
    human
  </p>
</div>

Refer : TypeError: p.easing[this.easing] is not a function

for a reason is not working on my website.. look at file:///C:/Users/kenny/Desktop/public_html/index.html there is an arrow below "estilo + elegancia" when I add there the easeOutExpo it doesn't work I dont know why — Kenny Amaro, Aug 05 '16 at 17:28
@KennyAmaro ___file:///C:/Users/kenny/Desktop/public_html/index.html___ how can I look at your local machine file :) — Pranav C Balan, Aug 05 '16 at 17:58

How to change fading to easing?

1 Answers1