如何设置自定义垂直滑块Jquery的动画

How to animate the custom vertical slider Jquery

本文关键字：Jquery 动画 垂直 自定义 何设置 设置      更新时间：2023-09-26

当前单击next和prev时，列表的高度正在调整。我不想增加和减少高度，而是想用一组新的内容替换当前内容。

预期：

  1. 如果我点击next/prev，当前可见的列表应该替换为带有一些幻灯片动画的新项目集
  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 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

更新

这是最新的小提琴。

我添加了基于当前显示页面隐藏或显示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();
    }
};

我知道你有一个解决方案，只想离开这个小提琴，因为这是另一个选项，有点不同的动画。

$(document).ready(function () {
    
    $('#list li:lt(3)').show();
   
   $('#next').click(function() {
   	$('#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')){
    	 $this.hide();
    }
	});
  
  $('#prev').click(function() {
  	$('#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')){
    	 $this.hide();
    }
	});
  
});
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>

相关文章：