用detach()淡入/退出

Question

我编写了一个简单的函数，在单击列表时滚动一个单词列表。我想试着让它淡入/消失，但是使用jQuery方法会导致一些off行为。没有fadein/out的代码是：

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

使用一些CSS：

.wordslide li {
  display: none;
}

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

我尝试将fadeOut添加到以下行：

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

但这并不像预期的那样有效。任何想法都是非常感谢的。

Answer 1

使用fadeout的完整事件：

.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);
});