jquery fadein（）随着运动 [英] jquery fadein() with movement

问题描述

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

 < div id =textlayerstyle =width：500px; height：500px ;背景颜色：#FFFFFF;过滤器：alpha（opacity = 70）;不透明度：0.8; position：absolute; left：250; top：150; display：none;> 
< div id =textstyle =display：none; padding-top：300px> 
< / div> 
< / div> 
 
函数div2（）{
 for（i = 0; i< displaymax; i ++）{
 $（'＃span'+ i）.fadeOut（'slow'） ; 
} 
 $（'＃textlayer'）。fadeIn（'slow'，function（）{
 $（'＃text'）。fadeIn（3000）; 
}） ; 
} 
  

但是我希望文本$（'＃text'）随着运动这是从底部到顶部，我如何将动画添加到上面的代码？

解决方案

这是你的效果寻找？

http://jsfiddle.net/5agg2/

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

脚本

<$ p $（'＃text'）。animate（{'opacity'：'show'，$'code $'''textlayer'）。 'paddingTop'：0}，2000）;
}）;

标记

 <$背景颜色：＃00FFFF;过滤器：alpha（不透明度= 70）;不透明度：0.8;位置：绝对;左：250像素：c $ c>< div id =textlayerstyle =width：500px; height：500px; ;顶部：150;显示：无;溢出：隐藏;> 
< div id =textstyle =display：none; background-color：Red; padding-top：900px> 
测试文本
< / div> 
< / div> 
  

注意：我添加了 padding-top： 900px 添加到文本div的标记以将其移动到包含div的外部，并且还向容器中添加了 overflow：hidden; p>

The following is the code that control two layers which are textlayer and text. After textlayer display then the text display,

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

but i want that the text $('#text') fadein with movement that is from bottom to the top, how do i add the animation to the above code?

解决方案

Is this the effect you are looking for?

http://jsfiddle.net/5agg2/

Without the colors, of course. It fades in the main div, then fades and moves from bottom to top the text div.

Script

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

Markup

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

NOTE: I added padding-top:900px to the markup for the text div to move it outside of the containing div and I also added overflow:hidden; to the container.

这篇关于jquery fadein（）随着运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！