jquery - 淡入/淡出不起作用

Question

我试图在单击链接时触发动画。动画有 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/

谢谢!

Answer 1

fiddle DEmo

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