在jQuery函数中动态调整CSS值时遇到问题

我有这个jQuery动画横幅，我希望小的滚动单词与大的单词“one”垂直居中，而不考虑浏览器的宽度。由于我在CSS中设置了媒体查询，它最初可以正常工作，但是如果调整浏览器窗口的大小，对齐就会混乱。如何修改代码，以便在调整窗口大小时更新textTop的值？我尝试用

$（window.on（'resize'，function（）{…}）

包装startSlider函数的内容，但没有成功

$（文档）.ready（函数（）{
startSlider（0）；
功能启动滑块（索引）{
var textTop=$（'.descriptor'）.css（'top'）；
$（“#反馈”）.text（'textTop='+textTop）；
var$img=$（'#hp动画部门img'）.eq（索引）；
var$descriptor=$（'hp animation div span.descriptor'）.eq（索引）；
$img.fadeIn（1000）；
$descriptor.show（）.animate({
顶部：'-=50px'，
不透明度：1
}，1000，'easeOutQuad'，函数（）{
$（此）.delay（2000）.动画({
顶部：'-=50px'，
不透明度：0
}，500，'easeOutQuad'，函数（）{
$（this.hide（）.css（'top'，textTop）；
});
$img.delay（2000）.fadeOut（600，function（）{/*此处的速度似乎需要大于上述动画的速度；否则，在动画完成之前设置textTop的值*/
if（$（'#hp animation div img'）.length-1==索引）startSlider（0）；
else startSlider（索引+1）；
});
});
}
});
#hp动画{
高度：500px；
背景：#e6eaed；
位置：相对位置；
溢出：隐藏；
}
#hp动画#大制作{
字体系列：无衬线；
字号：18em；
线高：1；
字母间距：-15px；
字号：200；
颜色：#f05c23；
保证金：0；
位置：绝对位置；
右：46%；
顶部：70像素；
z指数：3；
}
#hp动画img，
#hp动画描述符{
显示：无；
不透明度：0；
位置：绝对位置；
}
#hp动画img{
左：50%；
不透明度：.25；
z指数：1；
}
#hp动画描述符{
字号：3em；
线高：1；
左：58%；
顶部：275px；
字体系列：无衬线；
字体大小：48px；
颜色：#394349；
z指数：2；
}
#回馈{
位置：绝对位置；
填充：20px；
左：0；
底部：0；
}
@介质（最大宽度：959px）{
#hp动画{
高度：400px；
}
#hp动画#大制作{
字号：15em；
顶部：60px；
}
#hp动画img{
高度：400px；
}
#hp动画描述符{
顶部：230像素；
}
}
@介质（最大宽度：767px）{
#hp动画{
高度：300px；
}
#hp动画#大制作{
字号：10em；
顶部：55px；
右：50%；
}
#hp动画img{
高度：300px；
}
#hp动画描述符{
顶部：180像素；
字号：2em；
}
}
@介质（最大宽度：500px）{
#hp动画{
高度：200px；
}
#hp动画#大制作{
字号：6em；
顶部：42px；
右：54%；
字母间距：-10px；
}
#hp动画img{
高度：200px；
左：50%；
}
#hp动画描述符{
顶部：135px；
左：55%；
字号：2em；
}
}

一号
搭档
标准
站台
发票联
解决方案
在那之前，我也有过类似的问题。我想不出如何将
.resize
与延时循环结合使用。我最后所做的与我下面所做的相似。基本上，我使用类和css来执行动画，而不是jQuery。所以我所做的就是添加和删除类，然后使用css来完成其余的工作

这实际上看起来也是一个不错的css关键帧场景，可能值得一看

希望有帮助


$（文档）.ready（函数（）{
var计数器=2；
startSlider（）；
setTimeout（函数（）{
$（'#hp animation>div:n类型（1）'）。addClass（'active'）；
}, 1000);
函数startSlider（）{
setTimeout（函数（）{
var next=计数器==1？5:计数器-1；
变量描述符=$（“#hp动画>div:n类型（“+counter+”）”）；
var next=$（“#hp动画>div:n类型（“+next+”）”）；
变量其他描述符=$（“#hp动画>div”）；
//删除类
其他_描述符。removeClass（'active next'）；
//添加类
next.addClass（'next'）；
descriptor.addClass（'active'）；
startSlider（）；
如果）我认为你的计划没有任何问题code@TemaniAfif问题是，文本在动画中没有垂直居中。是的，但当我尝试时，这对我来说很好…哇，德里克。感谢你为此付出的所有努力。我注意到了几个问题。首先，最终描述符向下滑动，而不是向上滑动。我通过替换declar修复了这个问题使用var next=counter==1执行next操作？5:counter-1；Second，有没有办法让动画立即播放，而不必等待五秒钟？@KrisHunt很好的修复。一点也不麻烦……我的意思是我完全把兔子追到了洞里！确实有办法让它立即播放。我会更新我的answer.我基本上会在一秒钟后设置另一个超时，并将活动类添加到第一个div中。然后需要将计数器设置为2而不是1。可以直接将类添加到html中，但这样做会使它看起来更平滑。