當mouseleave懸停以向下滾動div並自動滾動到頂部時

Question

Hye。我目前正在研究這個jQuery代碼，並且這些代碼工作正常。但是因爲我在jQuery中的理解非常有限，所以我無法真正調整代碼以滿足我的需求。

因此，我想向下滾動「.punchmeintheface」div，將鼠標懸停在它上面，同時我想在mouseleave時將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/