jquery - 悬停向下滚动 div 并在 mouseleave 时自动滚动到顶部

Question

惠。我目前正在处理这个 jquery 代码，这个代码工作正常。但由于我对 jquery 的理解非常有限，我无法真正调整代码以满足我的需求。

所以，我想在鼠标悬停时向下滚动“.punchmeintheface” div，同时我想在鼠标离开时将 div 自动滚动回顶部。

<div class="punchmeintheface">
   <img src="http://img29.imageshack.us/img29/2333/q4sl.jpg" alt="" />
</div>

和jQuery

var amount = '';
function scroll() {
    $('.punchmeintheface').animate({
        scrollTop: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}
$('.punchmeintheface').hover(function() {
    amount = '+=20';
    scroll();
}, function() {
    amount = '';
});

和css（如果需要）

  .punchmeintheface {
    width: 640px;
    height: 100px;
    overflow-y:auto; 
    overflow: hidden;
  }

这是我目前的工作：http: //jsfiddle.net/sandalkoyak/GhLCt/

请看一下并帮助我。谢谢！

Answer 1

只需编辑此部分

$('.punchmeintheface').hover(function() {
    amount = '+=20';
    scroll();
}, function() {
    amount = '0'; //<----- here
});

http://jsfiddle.net/GhLCt/1/