javascript - 如何将淡入淡出改为缓和？

Question

大家好，我有下面的代码，我想将渐变“慢”更改为 jquery 缓动:https://api.jqueryui.com/easings/但我不知道该怎么做，你能帮我吗？我从 javascript 和 jquery 开始。预先感谢，干杯!`

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

代码:

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

您可以设置easing值作为 jQuery 中的第三个参数 animate() 方法。

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

<小时/> 更新:仅限 swing和 linear缓动类型与 jQuery 库配合使用，以便使用其他包括 jQuery UI 库的内容。检查 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>

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