4

div のサイズを超えるコンテンツを含む、高さと幅が制限された div があります。そのため、div の上部と下部の両方に 2 つの画像を配置し、ホバーした画像に対してコンテンツを上下にスクロールさせたいと考えています。なんとかホバリングを取得できましたが、制御されておらず、マウスを画像から離しても最後まで続きます。そのため、マウスを離すとすぐにスクロールを停止し、マウスを画像上に再び置くと、スクロールを中断したところから再開したいと考えています。 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;
}​

ジャバスクリプト:

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

</p>

4

1 に答える 1

12

一度に少しずつアニメートする必要があります..

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 = '';
});
#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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

http://jsfiddle.net/gaby/xmAvh/のデモ

于 2013-01-02T13:10:45.407 に答える