jQuery无限/连续滚动悬停

Question

我似乎遇到悬停边缘滚动解决方案的一些麻烦，我已经有一个拖动滚动实施。

这里是我的代码：

演示1（当前页）：http://jsfiddle.net/SO_AMK/FdLZJ/

演示2（我试了一下）：http://jsfiddle.net/SO_AMK/8CCeA/

HTML摘录：

<section class="row"> 
     <div class="scroll-left" style="opacity: 0;"></div> 
     <div class="row-scroll"> 
      <div class="tile"> 
       <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" /> 
       <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title> 
      </div> 
      ..... 
      <div class="tile"> 
       <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" /> 
       <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title> 
      </div> 
     </div> 
     <div class="scroll-right" style="opacity: 0;"></div> 
    </section> 
    <section class="row"> 
     <div class="scroll-left" style="opacity: 0;"></div> 
     <div class="row-scroll"> 
      <div class="tile"> 
       <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" /> 
       <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title> 
      </div> 
      ..... 
      <div class="tile"> 
       <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" /> 
       <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title> 
      </div> 
     </div> 
     <div class="scroll-right" style="opacity: 0;"></div> 
    </section> 

jQuery的：

$(document).ready(function() {  
     var pos = 5; 

     $.fn.loopingScroll = function (direction, scrollElement) { 

      if (direction == "right") { 
       pos+=5; 
      } 

      else if (direction == "left") { 
       pos-=5; 
      } 
      $(scrollElement).parent().scrollLeft($(scrollElement).parent().data('scrollLeft') + pos); 
      return this; 
     } 

     $(".scroll-left").hover(function(){ 
     scrollLeftLoop = setInterval(function(){ 
      $(this).loopingScroll("left", this); 
      }, 25); 
      $(this).fadeIn('fast'); 
     }, function() { clearInterval(scrollLeftLoop); $(this).fadeOut('fast'); }); 

     $(".scroll-right").hover(function(){ 
      scrollRightLoop = setInterval(function(){ 
       $(this).loopingScroll("right", this); 
      }, 25); 
      $(this).fadeIn('fast'); 
     }, function() { clearInterval(scrollRightLoop); $(this).fadeOut('fast'); }); 
}); 

这是假设（去！）是脉冲替代/ WebApp，因此设计（我正在处理字体）。

任何想法？

预先感谢您。

Answer 1

好了，头一点点敲打后，我想出了这一点：

$(".scroll-left").hover(function() { 
    $(this).parent().animate({scrollLeft: 0}, 7000); 
    $(this).fadeIn('fast'); 
}, function() { 
    $(this).parent().stop(); 
    $(this).fadeOut('fast'); 
}); 

$(".scroll-right").hover(function() { 
    $(this).parent().animate({scrollLeft: $(this).siblings(".row-scroll").width()}, 7000); 
    $(this).fadeIn('fast'); 
}, function() { 
    $(this).parent().stop(); 
    $(this).fadeOut('fast'); 
}); 

它基本上是采用scrollLeft功能和计算滚动元素的宽度上即时的滚动到要使用的值。 Here是一个演示此代码的JSFiddle。

我希望有人有这个用法，我正在适当地重命名这个问题。

Answer 2

我知道它太晚了，但如果其他人需要帮助，那么他们可以得到解决方案。 试试这个动画循环

function loopl(){ 
    $('.mCSB_container').animate({ "left": "+=80px" }, "800", 'linear', loopl ); 
}   
function loopr(){ 
    $('.mCSB_container').animate({ "left": "-=80px" }, "800", 'linear', loopr ); 
} 
function stop(){ 
    $('.mCSB_container').stop(); 
} 
$("#left").hover(loopl, stop); 
$("#right").hover(loopr, stop);