JQuery Fadein () с движением - PullRequest
Новая
       9

JQuery Fadein () с движением

3 голосов
/ 13 января 2012

Ниже приведен код, управляющий двумя слоями: текстовым и текстовым. После отображения текстового слоя затем текстовый дисплей, 

<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') исчезал с движением снизу вверх, как добавить анимацию к приведенному выше коду?

Ответы [ 2 ]

3 голосов
/ 13 января 2012

Это тот эффект, который вы ищете?

http://jsfiddle.net/5agg2/

Без цветов, конечно.Он исчезает в главном div, затем исчезает и перемещается снизу вверх в текстовом div.

Script 

$('#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>

NOTE : я добавил padding-top:900px к разметке для текста div, чтобы переместить его за пределы содержащего div, и также добавил overflow:hidden; в контейнер.

0 голосов
/ 13 января 2012

избавьтесь от fadeIn, просто используйте animate 

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