jQuery動畫循環不起作用

我試圖創建一個循環動畫，onmousedown開始並停在onmouseout上。效果是一個簡單的滾動，將繼續循環，直到你釋放鼠標。jQuery動畫循環不起作用

我創建了一個執行.animate方法的函數，它將自身作爲回調傳遞，但代碼只運行一次。

這裏是整個代碼：

$(document).ready(function() { 
var $scroller = $("#scroller"); 
var $content = $("#content", $scroller); 

// lineHeight equal to 1 line of text 
var lineHeight = $content.css('line-height'); 

//Amount to scroll = 3 lines of text a time 
var amountToScroll = lineHeight.replace("px","")*3; 
var maxScroll = $content.height() - $scroller.height(); 

function scrollDown() { 
    var topCoord = $content.css("top").replace("px",""); 
    if(topCoord > -maxScroll) { 
     if((-maxScroll-topCoord) > -amountToScroll) { 
      $content.stop().animate({ 
       top: -maxScroll 
      }, 1000 
      ); 
     } 
     else { 
      $content.stop().animate({ 
       top: "-=" + amountToScroll 
      }, 1000, 
      function(){ 
       scrollDown() 
      } 
      ); 
     } 
    } 
} 

function scrollUp() { 
    var topCoord = $content.css("top").replace("px",""); 
    if(topCoord < 0) { 
     if(topCoord > -amountToScroll) { 
      $content.stop().animate({ 
       top: 0 
      }, 1000 
      ); 
     } 
     else { 
      $content.stop().animate({ 
       top: "+=" + amountToScroll 
      }, 1000, 
      function(){scrollUp()} 
      ); 
     } 
    } 
} 

$("#scroll-down").mousedown(function() { 
    scrollDown(); 
}); 

$("#scroll-down").mouseup(function() { 
    $content.stop(); 
}); 

$("#scroll-up").mousedown(function() { 
    scrollUp(); 
}); 
$("scroll-up").mouseup(function() { 
    $content.stop(); 
}); 
});

來源

2010-05-22 Marko

你有沒有試圖消除stop()電話？

function scrollDown() { 
    var topCoord = parseInt($content.css("top").replace("px","")); 
    if(topCoord > -maxScroll) { 
     if((-maxScroll-topCoord) > -amountToScroll) { 
      $content.animate({ 
       top: -maxScroll 
      }, 1000 
      ); 
     } 
     else { 
      $content.animate({ 
       top: "-=" + amountToScroll 
      }, 1000, scrollDown 
      ); 
     } 
    } 
}

您不需要停止，因爲只有在當前動畫結束後動畫纔會排隊。

此外，它到達底部後，它應該再次向上滾動然後再滾下去？

來源

2010-05-22 07:37:40 sirhc

謝謝@sirhc - 這是干擾（），是干擾。雖然我想在按下鼠標的同時保持滾動，但如果有人多次單擊按鈕，我不想建立隊列。有沒有解決的辦法？ – Marko 2010-05-22 23:58:59

查看['.stop（）']（http://api.jquery.com/stop/）的文檔。給出一個例子。你可能需要使用'stop（true，true）'。但是，因爲您正在循環播放動畫，所以無法在動畫播放之前使用它，否則它將無限次地重現。儘管你可以在'mouseup'上使用它。 – sirhc 2010-05-23 13:52:05

當你說「scroll」時，你是否在討論帶有滾動條的元素的實際滾動位置（就像現在可能在本頁右側的那個）？

如果這就是你的意思，jQuery有一個scrollTop()方法可以用來獲取和設置滾動位置。

var topCoord = $content.scrollTop(); 

... 

$content.animate({ 
      scrollTop: "+=" + amountToScroll 
     }, 1000, 
     function(){scrollUp()} 
     );

這將移動內容的滾動條位置。

不知道這是否是你想要做什麼，或者如果它更是一個滑塊，其中scroller剪輯content不使用滾動條，所以你需要真正的移動內容的頂部座標..

來源

2010-05-22 12:46:34 user113716

jQuery動畫循環不起作用

回答

相關問題