-1

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);
        });
oceanic815
  • 483
  • 2
  • 9
  • 20

2 Answers2

0

http://api.jquery.com/animate/

$("#navi_bakery img").animate({top: 0}, 400, 'swing');

The string at the end is the easing type. By default there's swing and linear, jQuery UI and various other plugins add more.

user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
0

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/

Kev
  • 2,656
  • 3
  • 39
  • 63
  • How can I shorthand it to add "EaseInOutExpo" to this script? – oceanic815 Sep 01 '13 at 23:35
  • 1
    `EaseInOutExpo` won't work unless you are also running a plugin that adds easings - such as jQueryUI, linked below, or the plugin mentioned on that linked page. As said in my answer below, the only easings included in regular jQuery without extra plugins are `swing` and `linear` (your site might already use jQueryUI, it's quite common). When you've added the plugin, add the name of the easing as a string as an argument after the duration, like in the answer... – user56reinstatemonica8 Sep 01 '13 at 23:56