jquery - slideDown div 里面有文字

Question

小提琴

我正在尝试向下滑动一个 Div。

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

div 滑动正常，但里面的文本内容看起来固定在一个地方。

如何使此文本与 Div 一起滑动。

我有我的 div 定位absolute，我不想因为某种原因改变它。

Answer 1

您需要将文本放入另一个标签（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/

Answer 2

这是我的尝试... :) 样式没有改变，只有顶部位置从 0 更改为 -95 px .. 所以用animate({top:'0px'},"slow")

我将元素“滑动”到原始位置.. 意思是 0px.. 这将移动中的所有内容div作为一个元素移动。“就像一个盒子，而不是单独的物品。” 因此在不影响其他任何东西的情况下创建滑下效果:)

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