jquery停止滑塊在第一個孩子和最後一個孩子

Question

我有一個jQuery滑塊，它滑過很好。但是我希望滑塊不會向左滑動，如果它已經到達第一個孩子，並且如果它已經到達最後一個孩子，就不會向右滑動

我曾嘗試在腳本的頂部添加這個，但它似乎並不影響任何東西：

$('.yearslist').find('.li:last-child').stop(true, true); 

我創建了一個jsFiddle或查看我的下面JS：

JS/js.js

$(document).ready (Initialize); 

function Initialize(){ 
    InitList(); 
} 

var moveLeft = false; 
var moveRight = false; 

var left = function() { 
    if (moveLeft) 

     $(".yearslist").animate({ "marginLeft": "-=5px" }, 50, 'linear', left); 
        $('.yearslist').find('li:first-child').stop(true, true); 


}; 

var right = function() { 
    if(moveRight) 

     $(".yearslist").animate({ "marginLeft": "+=5px" }, 50, 'linear', right); 
           $('.yearslist').find('.li:last-child').stop(true, true); 


}; 

function InitList() { 
    $("span#NavigateForward").hover(
     function() { moveLeft=true; left(); }, 
     function() { moveLeft=false; } 
    ); 
    $("span#NavigateBackward").hover(
     function() { moveRight=true; right(); }, 
     function() { moveRight=false; } 
    ); 
} 

Answer 1

你可以這樣來做：

if ($('.yearslist').find('li:last-child').offset().left < $('#years').width() - 120) { 
    moveLeft = false; 
} 

和

if ($('.yearslist').find('li:first-child').offset().left > 86) { 
    moveRight = false; 
} 

看一看這個Fiddle。

您必須調整值120和86，才能根據需要進行換行（或創建變量）。 這不是最好的解決方案，但對於你已經完成的工作，我沒有看到其他解決方案。 希望它會有所幫助。