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

Question

当我的鼠标指针在背景位置向下滚动时，我想为菜单按钮添加垂直滚动效果，当离开菜单按钮区域时，背景位置向上滚动，就像这些水平菜单： http://www.htmldrive.net/items/demo/180/jQuery-Flip-Menu-using-backgroundPosition-Plugin

我的代码：

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

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

谢谢。

Answer 1

css3 解决方案怎么样？

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

看看这个小提琴！

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

Answer 2

由于某种原因，您不能设置负值。 试试这个： http://jsfiddle.net/9G6C2/2/

我改变的只是

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

并允许背景重复。

编辑：

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