jquery - 使用 animate css 作为轮子旋转

Question

我想使用 animate.css 旋转列表我有 5 个列表项。我保持第一个和最后一个列表项(0 和 4)不变并旋转列表项(1,2,3)我想旋转带有动画的列表项。我想像轮子一样旋转。我尝试单击下一个按钮。它没有按预期设置动画

jQuery(document).ready(function($){
 $('.flex-next').click(function(){
  $('.thumbnailIcon').each(function(index, item){
  	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');
	 $(secondLi).before(fourthLi);
  });

 });
$('.flex-prev').click(function(){
  $('.thumbnailIcon').each(function(index, item){
   	var fourthLi = $(item).find("li:nth-child(2)");
    var secondLi = $(item).find("li:nth-child(4)");
	  $(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>

Answer 1

jQuery(document).ready(function($){
 $('.flex-next').click(function(){
  $('.thumbnailIcon').each(function(index, item){
  	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 rotateIn');

var secondLi = $(item).find("li:nth-child(2)").addClass('animated rotateIn');
	 $(secondLi).before(fourthLi);
  });

 });
$('.flex-prev').click(function(){
  $('.thumbnailIcon').each(function(index, item){
   	var fourthLi = $(item).find("li:nth-child(2)");
    var secondLi = $(item).find("li:nth-child(4)");
	  $(secondLi).after(fourthLi);
  });

 });

});

ul{
list-style-type:none;
width:500px;
border:1px solid red;
}
ul li{
width:50px;
height: 50px;
display: inline-flex;
justify-content: center;
align-items: center;

}

<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>