淡入淡出/淡出()

时间:2017-04-12 10:25:45

标签: jquery

我编写了一个简单的函数来在单击列表时滚动单词列表。我想尝试使淡入/淡出,但使用jQuery方法会导致一些关闭行为。没有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();

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

1 个答案:

答案 0 :(得分:1)

使用fadeout的完整事件:

.fadeOut( [duration ] [, complete ] )

e.g。

$('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);
});