CODEWITHSUNDEEP
jqueryeasingjquery-easing
Javi Pérez
Javi Pérez

Reputation: 13

Easing Jquery doesn't work

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

Upvotes: 1

Views: 5101

Answers (3)

Giannis Grivas
Giannis Grivas

Reputation: 3412

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!

Upvotes: 1

Sparky
Sparky

Reputation: 98718

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

Upvotes: 1

Cheery
Cheery

Reputation: 16214

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/

Upvotes: 1

Related Questions