Question

Fiddle

我正在尝试使用幻灯片播放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")
});

slideDown div里面有文字

Fiddle

2 个答案: