CODEWITHSUNDEEP
jquery
user2622004
user2622004

Reputation: 21

Easing not working

in the following example I am trying to add easing (easeInCubic) to a jQuery animation, but it is having no effect. Why?

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({ left: 200 }, 'slow', 'easeInCubic');
            });
        });
    </script>
</head>

<body>
    <button>Start Animation</button>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

Upvotes: 1

Views: 659

Answers (3)

Joren
Joren

Reputation: 3267

The easeInCubic functionality is part of the jQuery UI library. You'll need to include in in your html right underneath the jQuery library. jQuery only includes linear and swing.

Upvotes: 1

theftprevention
theftprevention

Reputation: 5213

You have two options here:

  1. Add the following to the beginning of your code, and your current script will work as is:

    $.extend($.easing, {
    easeInCubic: function (x, t, b, c, d) {
        return (c*Math.pow((t/d),3)) + b;
    }
});

  2. Or, you can download danro's jquery-easing.js, which is where that script comes from, and which includes the full suite of easing functions.

Upvotes: 2

Irvin Dominin
Irvin Dominin

Reputation: 30993

You have yo include jQuery UI; the library extend the jQuery easing animations.

Quick ref:

Easing functions specify the speed at which an animation progresses at different points within the animation. jQuery core ships with two easings: linear, which progresses at a constant pace throughout the animation, and swing (jQuery core's default easing), which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation. jQuery UI provides several additional easing functions, ranging from variations on the swing behavior to customized effects such as bouncing.

See: http://api.jqueryui.com/easings/

Demo: http://jsfiddle.net/IrvinDominin/kVLzr/

Upvotes: 0

Related Questions