Prev Next

jQuery Easing

jQuery easing functions determine the speed at which an animation progresses at different points within the animation cycle. By default, jQuery provides linear and swing easing methods, while additional easing options can be added using the jQuery Easing Plugin.

Key Topics

Default Easing Methods

jQuery's built-in easing options:

  • linear: The animation progresses at a constant pace.
  • swing: The animation starts slow, speeds up, and then slows down at the end.
// Linear easing
$("#box").animate({ left: "100px" }, { duration: 1000, easing: "linear" });

// Swing easing (default)
$("#box").animate({ left: "100px" }, { duration: 1000 });

Explanation: This code demonstrates the two default easing methods. The linear method progresses at a constant rate, while swing applies a more natural acceleration and deceleration effect.

Using the jQuery Easing Plugin

The jQuery Easing Plugin provides additional easing effects like easeInBounce, easeOutElastic, and more. To use it, include the plugin in your project.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
// Using an easing plugin method
$("#box").animate({ top: "200px" }, { duration: 1000, easing: "easeOutBounce" });

Explanation: After including the jQuery Easing Plugin, additional easing methods like easeOutBounce can be used for advanced animation effects.

Example: Easing Effects


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Easing Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="animateButton">Start Animation</button>

    <script>
        $(document).ready(function() {
            $("#animateButton").click(function() {
                $("#box").animate({ left: "300px" }, { duration: 1000, easing: "easeOutBounce" });
            });
        });
    </script>
</body>
</html>

Explanation: This example demonstrates the use of the jQuery Easing Plugin to create a bouncing animation effect when a button is clicked.

Key Takeaways

  • Default Options: jQuery includes linear and swing easing methods.
  • Advanced Effects: Use the jQuery Easing Plugin for additional easing methods like easeOutBounce and easeInElastic.
  • Visual Dynamics: Easing effects make animations smoother and more visually appealing.
Prev Next