Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
How to implement jQuery ScrollLeft with easing?
To implement jQuery ScrollLeft, use the jQuery Easing plugin. The easing plugin is used for animation.
You need to first add the Easing Plugin library. Let’s add the CDN:
script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.min.js"></script>
Example
You can try to run the following code to implement jQuery ScrollLeft with easing:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.min.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function() {
jQuery.easing.def = 'easeOutBounce';
$('#test').animate({"margin-left": '100'}, 'slow');
});
});
</script>
<style>
#test {
width:150px;
height:150px;
background-color:#6C220A;
}
</style>
</head>
<body>
<div id="test"></div>
<button id="button1">Scroll</button>
</body>
</html> 
Updated on: 2019-12-10T06:23:47+05:30
299 Views
Advertisements