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

Answer 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/

fadeIn / fadeOut不工作

2 个答案: