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