[英]jQuery animate through unordered list
I have an unordered list, the ul itself has no set height, and the li's have no set height. 我有一个无序列表,ul本身没有设置高度,li的没有设置高度。 I'm trying to only show 5 li's and cycle through them with up/down arrows.
我试图仅显示5 li,并使用向上/向下箭头在它们之间循环。 The issue I'm having is with the 'up' button.
我遇到的问题是使用“向上”按钮。 For this example, I have 6 items, and on the sixth click of 'up' it no longer hides the items but simply adds to them, defeating the purpose of the slider.
对于此示例,我有6个项目,在“向上”的第六次单击上,它不再隐藏这些项目,而只是将其添加到项目中,从而破坏了滑块的作用。
HTML HTML
<div id="container">
<a href="#" id="up">Up</a>
<a href="#" id="down">Down</a>
<ul>
<li><span>Gun 1</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 2</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 3</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 4</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 5</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 6</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
</ul>
</div>
JS JS
$('#container > ul > li:gt(4)').hide();
$('#up').click(function(e){
var first = $('#container ul li:first');
first.hide('fast',function(){
$('#container ul').append(first.show(500));
$('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});
$('#down').click(function(e){
var last = $('#container ul li:last');
last.hide('fast',function(){
$('#container ul').prepend(last.show(500));
$('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});
try out this.. actually onclick of up
you were trying to show the first li, instead of that u need to show the sixth one, so have added a line to show only those li's whose index is < 5
试试这个..实际上的onclick
up
你想显示第一李,而不是,ü需要显示的第六人,所以增加了一条线,只显示李娜的索引为< 5
$('#container > ul > li:gt(4)').hide();
$('#up').click(function(e){
var first = $('#container ul li:first');
first.hide('fast',function(){
$('#container ul').append(first); //don't show the first one, just append it
$('#container ul li:lt(5)').show(500); // add this line
$('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});
$('#down').click(function(e){
var last = $('#container ul li:last');
last.hide('fast',function(){
$('#container ul').prepend(last.show(500));
$('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.