如何使用缓动实现jQuery ScrollLeft？

How to implement jQuery ScrollLeft with easing?

您需要首先添加Easing Plugin库，让我们添加CDN：

1	script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.min.js">

例

实时演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.min.js">

$(document).ready(function() {
$("#button1").click(function() {
jQuery.easing.def = 'easeOutBounce';
$('#test').animate({"margin-left": '100'}, 'slow');
});
});

<style>
#test {
width:150px;
height:150px;
background-color:#6C220A;
}
</style>
</head>
<body>

<button id="button1">Scroll</button>
</body>
</html>