How to implement jQuery ScrollLeft with easing?

jQueryWeb DevelopmentFront End Technology

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:

Live Demo

<!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>
raja
Updated on 10-Dec-2019 06:23:47

Advertisements