javascript - 如何在函数之前使用动画函数

Question

我想同时使用 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>

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