切换页面后jQuery动画不同步
切换页面后jQuery动画不同步
提问于 2022-01-29 04:31:44
我试图创建一个页面，在每个文本之间，我使用淡入和淡出，这是完美的，但是当我更改窗口时，这个动画被延迟了，但是我用来改变文本的.html不会延迟，最终会导致所有的不同步。
有人知道这件事的解决方案吗？
这是我的JS代码
$(document).ready(() => {
let ms = 8000
let textQueue = ['1', '2', '3']
for (let index = 0; index < textQueue.length; index++) {
((index) => {
setTimeout(() => {
if (index == textQueue.length - 1) {
$(".text").click(() => {
window.open('link')
})
}
$(".text")
.html(textQueue[index])
.fadeIn(1500)
.delay(5000)
.fadeOut(1500)
}, ms * index)
})(index)
}
})回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-30 11:26:26
我设法解决了这个问题，并改进了代码，我将把它留在这里，以防有人需要它。
基本上，我将其设置为只有在fadeOut动画结束时才更改文本。
JS代码：
$(document).ready(() => {
let ms = 8000
let textQueue = [
'0',
'1',
'2'
]
let index = 0
$(document).click(() => {
if (index + 1 === textQueue.length) {
window.open('link')
return
}
index++
$(".text").html(textQueue[index])
})
animation()
function animation() {
if (index < textQueue.length) {
$(".text").fadeOut(1500, () => {
$(".text").html(textQueue[index])
})
}
$(".text")
.fadeIn(1500)
.delay(5000)
setTimeout(() => {
if (index < textQueue.length - 1) {
index++
animation()
}
}, 8000)
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70905389
复制相关文章
相似问题
腾讯云开发者
