使用animate css旋转为轮子

Question

我想使用animate.c旋转列表我有5个列表项。我保持第1个和最后一个列表项（0和4）不变并旋转列表项（1,2,3）我想要漫游带动画的列表项。我想旋转为wheel.I尝试了下一个按钮click.It没有按预期动画

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

＆＃13;

＆＃13;

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);
  });

 });

});

＆＃13;

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;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;