將鼠標懸停在圖像上以受控方式滾動div內容

Question

我有一個限制高度和寬度的div，其內容超過了div的大小。所以我已經在div的頂部和底部放置了兩個圖像，我希望內容能夠相對於我懸停的圖像上下滾動。我已經設法讓懸停，但它不受控制，即使我將鼠標移離圖像，它也會一直持續到最後。所以我希望滾動停止，只要我將鼠標移開，當我再次將鼠標懸停在圖像上時，我希望滾動從停止的位置恢復。 jsfiddle

HTML：

<div id="hover"> HOVER ME </div> 

<div id="container"> 

The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts, and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full article...) 
Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................ 

The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts, and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full article...) 
Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................ 
</div> 
<div id="hover2"> HOVER ME </div>​ 

CSS：

#hover{ 
    width:200px; 
    height:20px; 
border:1px solid #cc0000; 
} 
#hover2{ 
    width:200px; 
    height:20px; 
border:1px solid #cc0000; 
} 
#container{ 
    width:500px; 
    height:300px; 
overflow-y:auto; 
    border:1px solid #000; 
    overflow: hidden; 
} 
#container div{ 
    width:100px; 
height:100px;  
    float:left; 
}​ 

JAVASCRIPT：

$('#hover').hover(function(){ 
    $('#container').animate({ scrollTop: $('#container')[0].scrollHeight }, 1000); 
}); 
$('#hover2').hover(function(){ 
    $('#container').animate({ scrollTop: 0 }, 1000); 
});  

Answer 1

你需要在一個時間以動畫一點點..

var amount = ''; 

function scroll() { 
    $('#container').animate({ 
     scrollTop: amount 
    }, 100, 'linear',function() { 
     if (amount != '') { 
      scroll(); 
     } 
    }); 
} 

$('#hover').hover(function() { 
    amount = '+=10'; 
    scroll(); 
}, function() { 
    amount = ''; 
}); 
$('#hover2').hover(function() { 
    amount = '-=10'; 
    scroll(); 
}, function() { 
    amount = ''; 
}); 

演示在http://jsfiddle.net/gaby/xmAvh/