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()方法中的第3个参数。

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

<小时/> 更新：只有swing和linear缓动类型适用于jQuery库才能使用其他include jQuery UI库。查看documentation description of easing option：

.animate（）的剩余参数是一个命名要使用的缓动函数的字符串。缓动函数指定动画在动画中的不同点处进行的速度。 jQuery库中唯一的缓动实现是默认的，称为swing，以及一个以恒定速度进行的实现，称为线性。使用插件可以获得更多缓动功能，最明显的是jQuery UI suite 。

＆＃13;

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

＆＃13;

参考：TypeError: p.easing[this.easing] is not a function

如何将褪色改为宽松？

1 个答案: