Question

以下是控制两个图层（文本层和文本）的代码。文本层显示后，文本显示，

<div id="textlayer" style="width:500px; height:500px; background-color:#FFFFFF;filter:alpha(opacity=70);opacity:0.8; position:absolute;left:250;top:150;display:none;">
    <div id="text" style="display:none; padding-top:300px">
    </div>
</div>

    function div2() {
        for (i=0;i<displaymax;i++) {
        $('#span'+i).fadeOut('slow');
        }
        $('#textlayer').fadeIn('slow', function () {
            $('#text').fadeIn(3000);
        });
    }

但是我希望文本$（'＃text'）通过从下到上的移动淡入淡出，如何将动画添加到上面的代码中？

Answer 1

这是你正在寻找的效果吗？

http://jsfiddle.net/5agg2/

当然没有颜色。它在主div中消失，然后淡出并从文本div的底部移动到顶部。

脚本

$('#textlayer').fadeIn('slow', function () {
   $('#text').animate({'opacity': 'show', 'paddingTop': 0}, 2000);
});

标记

<div id="textlayer" style="width:500px; height:500px; background-color:#00FFFF;filter:alpha(opacity=70);opacity:0.8;position:absolute;left:250;top:150;display:none;overflow:hidden;">
    <div id="text" style="display:none; background-color:Red; padding-top:900px">
        Test Text
    </div>
</div>

注意：我将padding-top:900px添加到文本div的标记中，以将其移到包含div之外，我还将overflow:hidden;添加到容器中。

Answer 2

摆脱fadeIn，只需使用动画

$('#text').animate({'opacity': 'show', 'paddingTop': 0});

jquery fadein（）与运动

2 个答案:

脚本

标记