gpt4 book ai didi

jquery - 使用 jQuery 在文本中逐个字符淡出

转载 作者:行者123 更新时间:2023-12-01 02:51:56 24 4
gpt4 key购买 nike

在下面的代码中,我有一行文本“A B C”,我想逐个字符地淡出该文本,即首先淡出C,然后淡出B最后是A。该代码有效,但我认为我的解决方案非常笨拙。如果文本有更多字母,则必须为每个字母扩展代码,并在回调后进行回调...

可以用更简洁的方式解决这个问题吗?可以按顺序放置 fadeOut 而不是嵌套回调吗?

我的最终目标是逐个字符淡出文本,然后逐个字符淡入新文本...就像 Powerpoint 动画:)

$(document).ready(function() {
$("button").click(function() {
$("#C").fadeOut(300, function() {
$("#B").fadeOut(300, function() {
$("#A").fadeOut(300);
});
});
});
});
<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>

最佳答案

您可以首先以相反的顺序选择span,然后使用each循环并在内部使用delay与(time * index) on fadeOut()

$('button').click(function() {
$($("span").get().reverse()).each(function(i) {
$(this).delay(400 * i).fadeOut(300)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

关于jquery - 使用 jQuery 在文本中逐个字符淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44967311/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com