Search code examples
jqueryhovereasing

How to add easing to this JQuery script?


I want to add easing to this JQuery hover menu script, how can I do that?

$("#navi_bakery").hover(function(){
        $("#navi_bakery img").animate({
            paddingTop:"0px"
            },100);
    },function(){
        $("#navi_bakery img").animate({
            paddingTop:"17px"
            },100);
        });

Solution

  • It's pretty easy, you just need to choose your easing method. Generic example:

        $(element).animate({
            properties: {top: '17px'}
            duration: 1000, 
            easing: 'method', 
            complete: callback});
    

    Easing methods and examples here: http://easings.net/