如何動畫自定義垂直滑塊Jquery

Question

當前點擊next和prev，列表的高度正在調整。我想用新的一組內容替換當前的內容，而不是增加和減少高度。

後市展望：

1. 如果我點擊下一個/上，當前可見列表應該用新的設定與一些幻燈片動畫項目取代。
2. 此外，每次我需要顯示3個項目時，在當前場景中，一旦下一個/ prev迭代完成，只有2個項目變得可見。

這是我的嘗試：

JS：

$(document).ready(function() { 
    size_li = $("#list li").size(); 
    x=3; 
    $('#list li:lt('+x+')').show(); 
    $('#next').click(function() { 
     x= (x+3 <= size_li) ? x+3 : size_li; 
     $('#list li:lt('+x+')').show(); 
     $('#prev').show(); 
     if(x == size_li){ 
      $('#next').hide(); 
     } 
    }); 
    $('#prev').click(function() { 
     x=(x-3<0) ? 3 : x-3; 
     $('#list li').not(':lt('+x+')').hide(); 
     $('#next').show(); 
     if(x < 3){ 
      $('#prev').hide(); 
     } 
    }); 
}); 

JS小提琴：

Demo Link

Answer 1

我走近這個問題有點不同。這是fiddle。

我的解決方案的要點是，我使用jQuery的animate函數做平滑滾動效果：

$('ul').animate({ 
    scrollTop: $('ul').scrollTop() + height_to_show 
}, 500); 

一抓，然而，就是在ul和li元素需要有固定高度。這些高度是根據您設置下列變量內部計算：

/** 
* Total number of elements in the list 
* @type {Number} 
*/ 
var num_of_elems = 8; 

/** 
* Static height of each element (in pixels) 
* @type {Number} 
*/ 
var height_of_elem = 25; 

/** 
* Number of elements you want to show in the page 
* @type {Number} 
*/ 
var num_of_elems_to_show = 3; 

/** 
* The visible height of the ul 
* @type {Number} 
*/ 
var height_to_show = 0; //calculated internally 

---

UPDATE

下面是更新fiddle。

我添加了隱藏或顯示基於當前頁面顯示的prev和next按鈕的功能。

/** 
* Show or hide the prev and next button depending on the current_page 
*/ 
var show_hide_buttons = function() { 
    if (current_page === Math.ceil(num_of_elems/num_of_elems_to_show) - 1) { 
     $('#next').hide(); 
    } else { 
     $('#next').show(); 
    } 

    if (current_page === 0) { 
     $('#prev').hide(); 
    } else { 
     $('#prev').show(); 
    } 
}; 

Answer 2

我知道你有一個解決方案，只是想離開這個小提琴，因爲這是另一種選擇和一點不同的動畫。

$(document).ready(function() { 
 
    
 
    $('#list li:lt(3)').show(); 
 
    
 
    $('#next').click(function() { 
 
    \t $('#prev').show(); 
 
    var last = $('#list').children('li:visible:last'); 
 
    last.nextAll('#list li:lt(3)').toggle(200); 
 
    last.next().prevAll('#list li').hide(200); 
 
    
 
    var $this = $(this); 
 
    if ($('#list li').last().is(':visible')){ 
 
    \t $this.hide(); 
 
    } 
 
\t }); 
 
    
 
    $('#prev').click(function() { 
 
    \t $('#next').show(); 
 
    var first = $('#list').children('li:visible:first'); 
 
    first.prevAll('#list li:lt(3)').toggle(200); 
 
    first.prev().nextAll('#list li').hide(200) 
 
    
 
    var $this = $(this); 
 
    if ($('#list li').first().is(':visible')){ 
 
    \t $this.hide(); 
 
    } 
 
\t }); 
 
    
 
});

ul,li,ol{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.l_swiper{ 
 
    border: 1px solid #333; 
 
    width: 50%; 
 
    padding: 20px; 
 
} 
 

 
#list{ 
 
    overflow: hidden; 
 
    max-height: 117px; 
 
} 
 
#list li{ 
 
    display: none; 
 
    padding : 10px; 
 
    border-bottom : 1px solid #333; 
 
} 
 
#list li:last-child{ 
 
    margin-bottom: 39px; 
 
} 
 
#next{ 
 
    float: right; 
 
    border: 1px solid #333; 
 
    padding: 10px; 
 
    margin-top : 20px; 
 
    cursor: pointer; 
 
} 
 
#prev{ 
 
    float: left; 
 
    border: 1px solid #333; 
 
    padding: 10px; 
 
    margin-top : 20px; 
 
    cursor: pointer; 
 
} 
 
.clearfix{ 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="l_swiper"> 
 
    <ul id="list"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
</ul> 
 
<div id="prev">prev</div> 
 
<div id="next">Next</div> 
 
<div class="clearfix"></div> 
 
</div>