我想使用animate.css旋转列表我有5个列表项目。我将第一个和最后一个列表项目(0和4)保持不变并旋转列表项目(1,2, 3)我想roate列表项与animation.I要旋转,wheel.I与下一个按钮都试过预期使用动画css旋转为轮子
jQuery(document).ready(function($){
$('.flex-next').click(function(){
$('.thumbnailIcon').each(function(index, item){
\t var fourthLi = $(item).find("li:nth-child(4)");
var secondLi = $(item).find("li:nth-child(2)");
//var FirstLi = $(item).find("li:nth-child(1)","li:nth-child(3)").addClass('animated flipInY');
var thirdLi = $(item).find("li:nth-child(3)").addClass('animated fadeInRight');
var secondLi = $(item).find("li:nth-child(2)").addClass('animated fadeInRight');
\t $(secondLi).before(fourthLi);
});
});
$('.flex-prev').click(function(){
$('.thumbnailIcon').each(function(index, item){
\t var fourthLi = $(item).find("li:nth-child(2)");
var secondLi = $(item).find("li:nth-child(4)");
\t $(secondLi).after(fourthLi);
});
});
});
ul{
list-style-type:none;
width:500px;
border:1px solid red;
}
ul li{
width:50px;
display:inline;
}
<link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slider">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left 0</li>
<li> 1</li>
<li >2</li>
<li > 3</li>
<li>right 4</li>
</ul>
</li>
<a class="flex-prev">prev<a>
<a class="flex-next">next<a>
为什么你想让ul的第一个和最后一个孩子留在同一个地方?他们是否必须成为名单的一部分?或者他们还有其他的功能呢? – RMo