淡入/淡出不工作答案

【问题标题】：fadeIn/fadeOut not working淡入/淡出不工作
【发布时间】：2013-12-04 05:48:27
【问题描述】：

我试图在单击链接时触发动画。动画有 2 个组件： - 包含链接的 div 向下移动 - 链接的文本会随着淡入/淡出的平滑动画变化

HTML：

<div class="col-md-5">
<div id='desc'>
    <p class="lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
        <a class='more'>much more</a>
    </p>Cras elementum ultrices diam. </p>
</div>

CSS：

#desc{
position:absolute;
top:0px;

}

JS：

$('.more').click(function() {

$(this).parent().parent().stop().animate({"top": '+50'}, 'slow','easeOutExpo');

    $(this).stop().fadeOut();
    $(this).stop().html('<i class="fa fa-chevron-up"></i> Hide</a>');
    $(this).stop().fadeIn(5000);

});

但是它不起作用，我不明白我做错了什么。

有人知道答案吗？这是jsfiddle： http://jsfiddle.net/Z24dK/

谢谢！

【问题讨论】：

标签： jquery animation jquery-animate fadein

【解决方案1】：

fiddle DEmo

$(this).stop().fadeOut('slow', function () {
    $(this).stop().fadeIn(5000).html('<i class="fa fa-chevron-up"></i> Hide</a>');
});

【讨论】：

【解决方案2】：

使fadeIn 在fadeOut 完成后作为回调发生。

$(this).stop().fadeOut('fast', function(){
    $(this).stop().html('<i class="fa fa-chevron-up"></i> Hide</a>');
    $(this).stop().fadeIn(3000);
});

JS 小提琴： http://jsfiddle.net/Z24dK/2/

【讨论】：