Jquery 将两个元素并排设置动画'；t工作（淡出、淡出、动画）

我正在尝试设置两个元素的动画

font{
显示：块；
}
瑞德先生{
字体大小：150%；
颜色：红色；
}
0000000000000000
0000000000000000
$（'#test1，#test2'）.fadeOut（500，function（）{
$（'test1，'test2'）。文本（'11111111111'）
$（'test1，'test2'）.fadeIn（500）
$（'#test1，#test2'）。淡出（500，（）=>{
$（'test1，'test2'）。文本（'2222222'）；
$（'test1，'test2'）.css（“颜色”，“绿色”）.addClass（“红色”）
})
$（'test1，'test2'）.fadeIn（500）
$（'test1，'test2'）。延迟（500）
$（“#test1”）。设置动画({
“左边距”：“150px”
}, {
持续时间：100
})
$（“#test2”）。设置动画({
“左边距”：“300px”
}, {
持续时间：1000
})
$（'test1，'test2'）。延迟（1000）
$（'test1，'test2'）。淡出（500）
});

---

开始时，动画看起来不错。但是在最后我得到一个奇怪的闪烁，我不知道为什么…

首先，你可以将所有的

淡入

和

延迟

调用链接在一起，这些调用对于每个元素都是相同的。将

.text（）

调用放在

fade

回调中，例如：

const $tests = $('#test1, #test2');
$tests
  .fadeOut(500, () => {
    $tests.text('11111111111111111111')
  })
  .fadeIn(500)

然后，一旦两个元素的操作发生分歧，分别对两个元素调用

.animate

，然后对两个元素使用

.promise（）

，等待集合中所有元素的所有动画完成：

$("#test1").animate({
  'margin-left': '150px'
}, {
  duration: 100
})
$("#test2").animate({
  'margin-left': '300px'
}, {
  duration: 1000
});
$tests
  .promise()
  .done(() => {
    // all animations are done

全文：

const$tests=$（'test1，'test2'）；
$tests
.衰减（500，（）=>{
$tests.text（'11111111111'）
})
法丹先生（500）
.衰减（500，（）=>{
$（'test1，'test2'）。文本（'2222222'）；
$（'test1，'test2'）.css（“颜色”，“绿色”）.addClass（“红色”）
})
法丹先生（500）
.延迟（500）；
$（“#test1”）。设置动画({
“左边距”：“150px”
}, {
持续时间：100
})
$（“#test2”）。设置动画({
“左边距”：“300px”
}, {
持续时间：1000
});
$tests
.承诺
.完成（（）=>{
$tests
.延迟（100）
.衰减（500）
})

font{
显示：块；
}
瑞德先生{
字体大小：150%；
颜色：红色；
}

0000000000000000
0000000000000000

首先，您可以将每个元素相同的所有

淡入

和

延迟

调用链接在一起。将

.text（）

调用放在

fade

回调中，例如：

const $tests = $('#test1, #test2');
$tests
  .fadeOut(500, () => {
    $tests.text('11111111111111111111')
  })
  .fadeIn(500)

然后，一旦两个元素的操作发生分歧，分别对两个元素调用

.animate

，然后对两个元素使用

.promise（）

，等待集合中所有元素的所有动画完成：

$("#test1").animate({
  'margin-left': '150px'
}, {
  duration: 100
})
$("#test2").animate({
  'margin-left': '300px'
}, {
  duration: 1000
});
$tests
  .promise()
  .done(() => {
    // all animations are done

全文：

const$tests=$（'test1，'test2'）；
$tests
.衰减（500，（）=>{
$tests.text（'11111111111'）
})
法丹先生（500）
.衰减（500，（）=>{
$（'test1，'test2'）。文本（'2222222'）；
$（'test1，'test2'）.css（“颜色”，“绿色”）.addClass（“红色”）
})
法丹先生（500）
.延迟（500）；
$（“#test1”）。设置动画({
“左边距”：“150px”
}, {
持续时间：100
})
$（“#test2”）。设置动画({
“左边距”：“300px”
}, {
持续时间：1000
});
$tests
.承诺
.完成（（）=>{
$tests
.延迟（100）
.衰减（500）
})

font{
显示：块；
}
瑞德先生{
字体大小：150%；
颜色：红色；
}

0000000000000000
0000000000000000

这是因为

持续时间

s不同，您希望得到什么？好吧，最后两个元素都应该有一个淡出（500）。但是有一些闪烁，多次淡入淡出。你想让

test2

的动画完成（比

test1

长900毫秒），然后延迟1000毫秒，然后让两个元素一起淡出500毫秒吗？是的，那太好了。这是因为

的持续时间不同，你希望得到什么呢？好吧，最后两种元素都应该有一个淡出（500）。但是有一些闪烁，多次淡入淡出。你想让
test2
的动画完成（比
test1
长900毫秒），然后延迟1000毫秒，然后让两个元素一起淡出500毫秒吗？是的，那太好了。