jquery - スライドダウンdivにテキストが含まれています

Question

フィドル

Divをスライドダウンしようとしています。

$('#rnotif').slideDown('slow');

Divは適切にスライドしていますが、その中のテキストコンテンツは1か所に固定されているように見えます。

このテキストをDivと一緒にスライドさせるにはどうすればよいですか。

私は自分のdivを配置absoluteしていますが、何らかの理由でそれを変更したくありません。

Answer 1

これが私の試みです...:)スタイリングは変更されておらず、上部の位置のみが0から-95ピクセルに変更されました。animate({top:'0px'},"slow")

要素を元の位置に「スライド」します。つまり、0pxになります。これにより、内のすべてがdiv1つの要素として移動されます。「別々のアイテムではなく、箱のように。」したがって、他に影響を与えることなくスライドダウン効果を作成します:)

http://jsfiddle.net/cXdGL/3/

$('document').ready(function(){
    var html = "<div id='rnotif' style='background: #ffffcc;height: 70px;font-size: 25px;position: absolute;top: -95px;width: 100%;text-align: center;line-height: 70px;'>sliding down</div>";
    $('body').append(html);
    $("#rnotif").animate({top:'0px'},"slow")
});

Answer 2

テキストを別のタグ（bこの例では、または別のdiv）に入れてに設定する必要がposition:absolute;ありますbottom:0px;。これにより、スライドが発生しているときにテキストが再配置されます。お役に立てれば。

    $('document').ready(function(){
    var html = "<div id='rnotif' style='background: #ffffcc;height: 70px;font-size: 25px;position: absolute;top: 0px;width: 100%;line-height: 70px;'><b style='position:absolute;bottom:0px;text-align: center; width:100%'>sliding down</b></div>";
    $('body').append(html);
    $('#rnotif').hide();
    $('#rnotif').slideDown('slow');
});

JsFiddle： http: //jsfiddle.net/8HgVm/2/