Kenny Amaro Kenny Amaro - 3 months ago 16
CSS Question

How to change fading to easing?

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>




Answer

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

Comments