jQuery Scroll當我的圖像上移時

Question

我想滾動一張照片，當鼠標移過那張照片時。我有一個代碼，但我不知道該怎麼做。請幫幫我。

This is my jquery code, 

      $('.arrow').on('click', function(){ 
      var gallery = $('#image_container'); 
      var height = gallery.height(); 
      var up = $(this).is('.up_arrow'); 

      if (up) { 
       gallery.animate({'scrollTop': '-=' + height}); 
       } else { 
        gallery.animate({'scrollTop': '+=' + height});   
      } 
      }); 


and html is listed below, 
<div class="arrow up_arrow"><img src="images/icons/circle.gif"></div> 
      <div id="image_container" > 
       <p id="text_header" > Back to Green</p> 
       <img src="images/wallpapers_scroll/1.jpg" /> 
        <img src="images/wallpapers_scroll/2.jpg" /> 


      </div> 
      <div class="arrow down_arrow"><img src="images/icons/circle.gif"></div> 
The #image_container contains the photos 

Answer 1

嘗試使用marginTop而不是scrollTop。此外，您還需要在高度滾動後添加px。

$('.arrow').on('click', function(){ 
    var gallery = $('#image_container'); 
    var height = gallery.height(); 
    var up = $(this).is('.up_arrow'); 

    if (up) { 
    gallery.animate({'marginTop': '-=' + height+'px'},700); 
    } else { 
    gallery.animate({'marginTop': '+=' + height+'px'}); 
    } 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 

<div class="arrow up_arrow"><img src="http://placekitten.com/40/40"></div> 

<div id="image_container" > 
    <p id="text_header" > Back to Green</p> 
    <img src="http://placekitten.com/300/400" /> 
    <img src="http://placekitten.com/300/398" /> 
</div> 
<div class="arrow down_arrow"><img src="http://placekitten.com/40/40"></div>