detach（）でフェードイン/アウト

Question

リストをクリックしたときに単語のリストをスクロールする単純な関数を書いた。私はこのフェードイン/アウトを試してみたいと思いますが、jQueryメソッドを使用するといくつかの動作がオフになります。フェードイン/アウトのないコードは次のとおりです。いくつかのCSSと

function wordSlide(){ 
    var mover; 
    $('.wordslide').click(function(){ 
     mover = $('li',this).first().detach(); 
     mover.appendTo('.wordslide',this); 
    }); 
} 

：

.wordslide li { 
    display: none; 
} 

.wordslide li:first-of-type { 
    display: block; 
} 

私は次の行にフェードアウトを追加しようとしました：

mover = $('li',this).first().detach(); 

しかし、これはとしては動作しません。期待される。どんなアイデアも高く評価されています。

Answer 1

利用フェードアウトの完全なイベント：

.fadeOut([duration ] [, complete ]) 

例えばここで

$('li',this).first().fadeOut(400, function(){ $(this).detach(); }); 

例https://jsfiddle.net/nup92o3m/3/とフィドルです：

<div id="myDiv" style="background-color: red; width: 100px; height: 100px;"> 
</div> 
<div id="container" style="border: 1px solid black; width: 300px; height: 300px;"> 
</div> 
<script> 
$('document').ready(function(){ 
$('#myDiv').fadeOut(800, function() 
{ 
    var myDiv = $(this).detach(); 
    myDiv.appendTo('#container').fadeIn(800); 
});