【问题标题】：how to use animate function with before function如何将动画功能与之前的功能一起使用
【发布时间】：2017-07-20 07:23:46
【问题描述】：
我想同时使用 animate 和 before 函数。
我有列表项，我想在交换项时制作动画。
交换效果很好，但我想添加动画“慢”。
我想用转换交换列表。
是否可以在交换时使用动画“慢”功能？
我想用动画向左移动。
如果我单击下一个按钮，图像会在没有动画的情况下交换。
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)");
$(secondLi).before(fourthLi); //animate while swapping
//$(secondLi).animate(before(fourthLi),slow); I have tried as
});
});
$('.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);
});
});
});
.content__teaser {
text-align: center;
margin-bottom: 15px;
height: 110px;
}
.contentContainer ul {
list-style-type: none;
}
ul .thumbnailIcon {
width: 100%;
margin-left: 31%;
height: 100%;
}
.thumbnailIcon li {
float: left;
margin-left: 16px;
height: 110px;
align-items: center;
display: flex;
}
.thumbnailIcon .img-circle {
border-radius: 50%;
border: 4px solid #ffffff !important;
}
.thumbnailIcon .img-circle {
margin: auto;
border-radius: 50%;
border: 4px solid #ffffff !important;
}
.content__teaser img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<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<img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li>
<li >2<img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li>
<li >3 <img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li>
<li>right 4</li>
</ul>
</li>
<a class="flex-prev">prev<a>
<a class="flex-next">next<a>
【问题讨论】：
标签：
javascript
jquery
html
css
animation
【解决方案1】：
希望这是您正在寻找的，如果我理解正确，您正在寻找移动元素的效果。
JsFiddler 链接 https://jsfiddle.net/rj1405/tcpk6xde/2/
我刚刚扩展了您的代码并使用了 .fadeIn 和 .fadeOut 动画方法。
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)");
$(fourthLi).fadeToggle( "slow", function() {
$(secondLi).before(fourthLi).fadeIn("slow");
});
$(fourthLi).fadeIn("slow");
});
});
你可以在这里查看输出
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)");
$(fourthLi).fadeToggle( "slow", function() {
$(secondLi).before(fourthLi).fadeIn("slow");
});
$(fourthLi).fadeIn("slow");
});
});
$('.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);
});
});
});
.content__teaser {
text-align: center;
margin-bottom: 15px;
height: 110px;
}
.contentContainer ul {
list-style-type: none;
}
ul .thumbnailIcon {
width: 100%;
margin-left: 31%;
height: 100%;
}
.thumbnailIcon li {
float: left;
margin-left: 16px;
height: 110px;
align-items: center;
display: flex;
}
.thumbnailIcon .img-circle {
border-radius: 50%;
border: 4px solid #ffffff !important;
}
.thumbnailIcon .img-circle {
margin: auto;
border-radius: 50%;
border: 4px solid #ffffff !important;
}
.content__teaser img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<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<img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li>
<li >2<img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li>
<li >3 <img class="videoThumbnail img-circle" src="https://www.w3schools.com/css/paris.jpg" draggable="false" style="width: 100px;"></li>
<li>right 4</li>
</ul>
</li>
<a class="flex-prev">prev<a>
<a class="flex-next">next<a>