Search code examples
jqueryanimationeasing

jQuery Easing Plugin not working

Can't seem to get this jQuery easing plugin to work! I saw it on http://easings.net/ and I have a fiddle on http://jsfiddle.net/XqqtN/ with my code

I'm new to this please help!

$("#coolDiv").animate({'top':'-300px'},600,'easeOutBack',function(){ $(this).css({'top':'310px'});

Solution

  • Using the jQuery easing plugin should work:

    #coolDiv {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background: yellow;
}

<div id="coolDiv">cool</div>

var left = $('#coolDiv').offset().left;

$("#coolDiv").css({left:left}).animate({"left":"0px"}, { duration: 1500, easing: "easeOutBack" });

    Note that the main difference is adding { duration: 1500, easing: "easeOutBack" } to the animate function.

    Fiddle