関数の前にアニメーション関数を使用する方法

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>

を確認することができます