Easing Jquery doesn't work

Question

I'm trying to use an easing jQuery function called easeInBounce but it doen't work. I had search all about that and all pages says that I've to put {easing:'easeInBounce'} like here but it doesn't work.

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

<div>Push!</div>
<input type="text">
<input type="text" class="middle">
<input type="text">

<script>
    $( "div" ).ready(function() {
        $( this ).css({
            borderStyle: "inset",
            cursor: "wait"
        });
        $( "input" ).slideDown( {easing: 'easeInBounce'}, 1000, function() {
            $( this )
                    .css( "border", "2px red inset" )
                    .filter( ".middle" )
                    .focus();
            $( "div" ).css( "visibility", "hidden" );
        });
    });

</script>

As you can see I have changed the click and I put .ready to load the effect when loads the page.

This doesn't work and I don't know how to do that.

Thanks

Here you go: http://www.jsfiddle.net Set up your environment and code and save it, then post back with the link. — Control Freak, Oct 05 '14 at 00:36

score 1 · Answer 1 · answered Oct 05 '14 at 00:40

The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

You need to load jQuery UI too - http://api.jqueryui.com/easings/

score 1 · Answer 2 · edited May 23 '17 at 12:06

It's not working because the easeInBounce function is not part of the jQuery library. swing and linear are the only easing functions included within the jQuery library.

You could include jQueryUI or a jQuery easing plugin, however these might be overkill, so you could just put any relevant easing function(s) directly into your code.

$(document).ready(function() {

    $.easing.easeInBounce = function (x, t, b, c, d) {
        return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b;
    };
    $.easing.easeOutBounce = function (x, t, b, c, d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    };

    // now you can use it

    ....

See: jQuery easing functions without using a plugin

Giannis Grivas · Answer 3 · 2014-10-05T08:21:03.447

1

Why don't you use .animate() with .easeInBounce effect of jquery.easing.min.js?

Use it like that: http://jsfiddle.net/csdtesting/d88z6ur5/

$("div").ready(function () {

    $(this).css({
        borderStyle: "inset",
        cursor: "wait"
    });

    //$('#showme').fadeIn("easeInBounce");
    $('#showme').animate({
        top: '-=100px'
    }, 500, 'easeOutBounce', function () { // Animation complete.
        $(this)
            .css("border", "2px red inset")
            .filter(".middle")
            .focus();
        $("div").css("visibility", "hidden");
    });

});

Hope it helps!

edited Oct 05 '14 at 08:21

answered Oct 05 '14 at 00:59

Giannis Grivas

3,374
1
18
38

You should mention that one still needs the jquery easing plugin to do easeInBounce since he didn't know that with his question and may not know all the details included in a jsfiddle – Macsupport Oct 05 '14 at 02:42

Easing Jquery doesn't work

3 Answers3