Javascript 如何制作具有垂直滚动效果的菜单按钮

当鼠标指针在背景位置上向下滚动时，我想在我的菜单按钮上添加垂直滚动效果，当鼠标指针离开菜单按钮区域时，背景位置向上滚动，如以下水平菜单：

我的代码：

css

html

问题是，当我的鼠标指针离开菜单按钮区域时，向上滚动的效果不起作用

---

谢谢。

css3解决方案怎么样

html

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

看看这把小提琴

---

由于某些原因，您无法设置负值。 试试这个：

我所改变的只是

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

并允许背景重复

编辑：

---

谢谢你的回答，但它只是闪烁而不是滚动：）哇，第二个（）很好，谢谢你的帮助。

    $.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);});

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

#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;
}

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