How to make menu button with vertical scrolling effect

Question

I want to add vertical scroll effect to my menu button when my mouse's pointer over the background position scrolling down and when out of menu button area the background position scrolling up, like these horizontal menu: http://www.htmldrive.net/items/demo/180/jQuery-Flip-Menu-using-backgroundPosition-Plugin

my code:

css

#home{
      width: 46px;
      height:12px;
      background-image: url(http://imageshack.us/a/img577/5152/w6n.gif);
      background-position: 0 0;
      background-repeat: no-repeat;
}

html

<div id="home"></div>

Javascript

    $.fn.animateBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = pos[0] || 0,
    this.y = pos[1] || 0;
    $.Animation( this, {
        x: x,
        y: y
      }, { 
        duration: speed
      }).progress(function(e) {
          this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    });
    return this;
}

$.fn.stopBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = pos[0] || 0,
    this.y = pos[1] || 0;

        $.Animation( this, {
            x: x,
            y: y
          }, { 
            duration: speed
          }).progress(function(e) {
              this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
        });
        return this;

}   


$('#home').hover(function(){
    $("#home").animateBG(0, -12, 300);
},function(){$("#home").stopBG(0, 0, 300);});

jsfiddle

the problem is, when my mouse's pointer out of menu button area the scrolling up effect doesn't work.

Thanks.

Answer 1

For some reason you can't set a negative value. Try this: http://jsfiddle.net/9G6C2/2/

All I've changed is

$("#home").stopBG(0, 12, 300);

and allowed background repeat.

Edit:

http://jsfiddle.net/9G6C2/4/

Answer 2

How about a css3 solution?

html,

<div id="home"></div>

css,

#home {

    width: 46px;
    height: 12px;

    background-image: url(http://imageshack.us/a/img577/5152/w6n.gif);
    background-position: 0 0;
    background-repeat: no-repeat;

    /* css3 transitions */
    transition: all 220ms 0 linear;
    -ms-transition: all 220ms 0 linear;
    -wbkit-transition: all 220ms 0 linear;
    -moz-transition: all 220ms 0 linear;
}

#home:hover {
    background-position: 0 -12px;
}

Check out this fiddle!

http://jsfiddle.net/9G6C2/1/