如何在使用動畫功能之前使用動畫功能

Question

我想使用動畫和之前的功能。
我有列表項目，我想交換項目時動畫。

交換工作正常，但我想添加動畫'慢'。
我想用轉換交換列表。

交換時可以使用動畫'慢'功能嗎？
我想用動畫向左移動。
如果我點擊下一個按鈕圖像交換沒有動畫。

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)"); 
 
    \t $(fourthLi).fadeToggle("slow", function() { 
 
    \t \t $(secondLi).before(fourthLi).fadeIn("slow"); 
 
    \t }); 
 
    $(fourthLi).fadeIn("slow"); 
 
\t }); 
 
}); 
 
$('.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>