Question

在下面的代码中，我有一行文字＆＃34; A B C＆＃34;我希望逐个字符淡出，即C先淡出，然后B，最后A。代码有效，但我认为我的解决方案非常集中。如果文本中包含更多字母，则必须在回调后使用回调为每个字母扩展代码...

这可以用更整洁的方式解决吗？ fadeOuts可以按顺序放置而不是嵌套回调吗？

我的最终目标是逐个淡出文本字符，然后逐个字符淡入新文本......就像一个Powerpoint动画：）

＆＃13;

$(document).ready(function() {
  $("button").click(function() {
    $("#C").fadeOut(300, function() {
      $("#B").fadeOut(300, function() {
        $("#A").fadeOut(300);
      });
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button>Click to fade out character by character</button><br><br>

  <div>
    <span id="A">A</span>
    <span id="B">B</span>
    <span id="C">C</span>
  </div>

＆＃13;

Answer 1

您可以先按相反的顺序选择span，然后使用each循环和内部使用delay与time * index）{ {1}}

fadeOut()

$('button').click(function() {
  $($("span").get().reverse()).each(function(i) {
    $(this).delay(400 * i).fadeOut(300)
  })
})

Answer 2

您可以使用解决方案https://jsfiddle.net/d0326z9m/

<gb> &#9632; </gb>  <!-- green bullet -->

在这个解决方案中，无论你在div中有多少孩子，它都能完美表现。

Answer 3

我有疯狂的解决方案，你不必在dom中的span中写每个字符，而只需输入字符串并以相反的顺序淡出每个字符

<div class="text">Phone is great</div>

Javscript代码：

var queue = [];
var input = $(".text").text();
for (var i = 0; i < input.length; i++) {

  queue.push("<span class='charToFade'>" + input.charAt(i) + "</span>");

}
$(".text").text("");
while(queue.length>0)
 {
  $(".text").append(queue.shift());
}

$($("span").get().reverse()).each(function(i) {
    $(this).delay(400 * i).fadeOut(300)
 })

请参阅jsfiddle link

使用jQuery

3 个答案: