jquery - 需要有关在鼠标悬停时滚动 ul 元素的帮助

Question

我试图让我的 UL 元素在鼠标悬停时向左滚动，但我无法让它工作。这是我的 fiddle 链接:http://jsfiddle.net/MisterStorm/4ja9apqz/3/这是我的代码:

$(document).ready(function () {
  $('#next').hover( function () {
    scrollCallback = setInterval(function () {
      $('#divContainer ul').animate({
        'scrollLeft': $('#divContainer ul').offset().left
      }, 500);
      console.log($('#divContainer ul').offset().left);
    }, 50);
  }, function () {
    clearInterval(scrollCallback);
  });
});

#divContainer {
  width:300px;
  overflow:hidden;
  border:solid 1px #000;
  position: relative;
  height:20px;
}
#divContainer ul {
  list-style-type: none;
  position:absolute;
  top:0px;
  left:0px;
  margin:0;
  padding:0;
}
#divContainer ul li {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  display: inline;
  margin-left: 3px;
  margin-right: 3px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContainer">
  <ul>
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">5</a></li> 
    <li><a href="#">6</a></li> 
    <li><a href="#">7</a></li> 
    <li><a href="#">8</a></li> 
    <li><a href="#">9</a></li> 
    <li><a href="#">10</a></li> 
    <li><a href="#">11</a></li> 
    <li><a href="#">12</a></li> 
  </ul>
</div>
<div id="next">next</div>

感谢任何帮助!

Answer 1

这就是你想要的？？

http://jsfiddle.net/4ja9apqz/9/

我使用不同的方法，因为我不明白你的方法。

我只是像这样向左移动:

left_offset = $('#divContainer ul').css('left');

每 50 毫秒应用 left_offset -5px，并在悬停停止时重置为 0。