使用動畫css旋轉爲輪子

Question

我想使用animate.css旋轉列表我有5個列表項目。我將第一個和最後一個列表項目（0和4）保持不變並旋轉列表項目（1,2， 3）我想roate列表項與animation.I要旋轉，wheel.I與下一個按鈕都試過預期

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>

Answer 1

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 rotateIn'); 
 

 
var secondLi = $(item).find("li:nth-child(2)").addClass('animated rotateIn'); 
 
\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; 
 
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>

click.It不是動畫