如何將淡入淡出變爲淡化？

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 
}); 

---

UPDATE：只有 swing和 linear緩解類型，以便使用其他包括jQuery的用戶界面庫，jQuery庫工程。檢查 documentation description of easing option：

.animate（）的其餘參數是一個字符串，用於命名要使用的緩動功能。緩動函數指定動畫在不同點處進行動畫的速度。 jQuery庫中唯一的緩動實現是默認的，稱爲swing，並且以恆定的速度前進，稱爲線性。使用插件可獲得更多緩解功能，其中最值得注意的是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