Question

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

font {
  display: block;
}

.red {
  font-size: 150%;
  color: red;
}

<font id="test1" size="7">0000000000000000</font>
<font id="test2" size="7">0000000000000000</font>

$('#test1, #test2').fadeOut(500, function() {
  $('#test1, #test2').text('11111111111111111111')
  $('#test1, #test2').fadeIn(500)
  $('#test1, #test2').fadeOut(500, () => {
    $('#test1, #test2').text('2222222222222222');
    $('#test1, #test2').css("color", "green").addClass("red")
  })
  $('#test1, #test2').fadeIn(500)
  $('#test1, #test2').delay(500)
  $("#test1").animate({
    'margin-left': '150px'
  }, {
    duration: 100
  })
  $("#test2").animate({
    'margin-left': '300px'
  }, {
    duration: 1000
  })
  $('#test1, #test2').delay(1000)
  $('#test1, #test2').fadeOut(500)
});

开始时，动画看起来不错。但是最后我出现了奇怪的眨眼，我不知道为什么...

Answer 1

首先，您可以将每个元素相同的所有fade和delay调用链接在一起。将.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
  .fadeOut(500, () => {
    $tests.text('11111111111111111111')
  })
  .fadeIn(500)
  .fadeOut(500, () => {
    $('#test1, #test2').text('2222222222222222');
    $('#test1, #test2').css("color", "green").addClass("red")
  })
  .fadeIn(500)
  .delay(500);
$("#test1").animate({
  'margin-left': '150px'
}, {
  duration: 100
})
$("#test2").animate({
  'margin-left': '300px'
}, {
  duration: 1000
});
$tests
  .promise()
  .done(() => {
    $tests
      .delay(100)
      .fadeOut(500)
  })

font {
  display: block;
}

.red {
  font-size: 150%;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<font id="test1" size="7">0000000000000000</font>
<font id="test2" size="7">0000000000000000</font>

并排设置两个元素的动画无效（fadeIn，fadeout和animate）

1 个答案: