Javascript 正在尝试获取动态幻灯片文本。集装箱上没有固定高度。看小提琴

我试图将文本“WE CREATE DANCE”、“WE HAVE FUN”、“WE LOOK GOOD”放在一个容器中，该容器将根据文本大小和文本行数进行调整。容器的大小未知，因为它是动态的。我不能给这个容器增加高度。幻灯片。我希望容器根据文本大小进行调整。如果我从子元素中取出position:absolute，文本就是我想要的……但是，这样做会破坏幻灯片。所以这是行不通的。我选择了这个幻灯片代码，因为它非常小。所以我想保持它的小规模，只添加一些代码行。我不想添加整个框架。我正在使用jquery，并希望保留它

现在您将看到幻灯片显示文本与其下方的文本重叠。我试图把下面的文字往下推

提前感谢你的帮助。我希望我能最终实现这一目标：）

我想,

如果我理解正确，您需要将

滑块项上的高度设置为
高度：自动并删除`位置：绝对：

slider-item {
display: none;

    width: 100%;
    height: auto;
text-align: center;
}

但您会注意到，新文本上的
fadeIn
触发得太早，这是因为需要将
回调函数
传递给
fadeOut（）
函数，该函数在动画完成时调用。我会马上更新小提琴，让你看看这个额外的东西
 已更新标记，请尝试以下操作

Lorem ipsum door sit amet，一位杰出的领导者，在劳动和就业的时间里
我们创造舞蹈
我们玩得很开心
我们看起来不错
麦格纳阿利夸。我们的工作是最低限度的，我们的工作是在实验室里进行的。
在我看来，使用CSS是一种更干净的方式：


var InfiniteRotator={
init:function（）{
//项目之间的间隔（以毫秒为单位）
var itemInterval=5000；
//循环浏览项目
var InfiniteLop=setInterval（函数（）{
var current=$（“.slider item.visible”）.removeClass（'visible'）；
var next=current.next（）；
next=next.length？next:current.slides（）.first（）；
next.addClass（'visible'）；
}，项目间隔）；
}
}
$（document）.ready（function（）{//在加载HTML和图像后启动
//检查是否有一个或多个图像
如果（$（'.slider>div'）。长度>1）{
//跑步滑块
init（）；
}
});
.slidermwtext{
边缘顶部：50px；
}
.滑块项目{
位置：绝对位置；
顶部：8px；
左：0；
文本对齐：居中；
宽度：100%；
不透明度：0；
-webkit过渡：不透明度0.5s缓进缓出；
-moz过渡：不透明度0.5s缓进缓出；
-o型过渡：不透明度0.5s缓进缓出；
过渡：不透明度0.5s缓进缓出；
}
.slider-item.visible{
位置：静态；
不透明度：1；
}

我们创造舞蹈
我们玩得很开心
我们看起来不错
知识产权是一种权利，是一种精英，是劳动和财富的临时契约。我们的工作是最低限度的，我们的工作是在实验室里进行的
 
以下是您的问题的解决方案

JQuery:

$('.slider-item').eq(currentItem).delay(510).fadeIn(fadeTime);

.slider-item {
    font-size: 22px;
    display: none;
    position: relative;
        width: 100%;
        height: 100px;
    text-align: center;
}

CSS:

$('.slider-item').eq(currentItem).delay(510).fadeIn(fadeTime);

.slider-item {
    font-size: 22px;
    display: none;
    position: relative;
        width: 100%;
        height: 100px;
    text-align: center;
}

选中
谢谢，但我不希望幻灯片文本位于段落文本内。我只想让幻灯片文本将段落向下推。这样可以，但褪色的文本应该在同一行。不会上下跳跃。这是因为使用了褪色效果。这是有效的。但是没有办法保持淡入淡出的过渡吗？我真的很想保持这种效果。我想你这里可能有东西。我会等你最新的小提琴。因为去掉position:absolute会使幻灯片文本没有那么好用。我将等待你的答复。谢谢你好，李莫。我认为您使用此解决方案的方向是正确的。我希望它会工作，一旦你更新它。祝你好运，嗨，乔希。我真的很想在幻灯片文本变为两行时将段落文本（幻灯片下方）向下推。你的解决方案和给容器增加一个高度的效果是一样的…所以它真的不起作用。啊，没注意到。请看我的CSS示例。我将使用以下代码。但是在我走之前，你能告诉我，我是否可以把你取出的代码加回去吗？与crossfade://交叉淡入淡出时间（毫秒）一样，var fadeTime=500；这在CSS转换属性中得到了说明。500毫秒==0.5秒。
.slider-item {
    font-size: 22px;
    display: none;
    position: relative;
        width: 100%;
        height: 100px;
    text-align: center;
}