国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

Wie kann ich die Textfarbe Buchstabe für Buchstabe ?ndern?

P粉613735289 2023-08-31 13:03:36

832

Ich m?chte, dass jeder Buchstabe im Text nacheinander seine Farbe ?ndert. Zum Beispiel: Hallo Welt ?H“ wird zuerst rot, dann ?E“, dann ?L“ und so weiter. Ich habe versucht, jeden Buchstaben in einen Span zu packen und JQuery und eine Schleife zu verwenden. Aber es funktioniert nicht. <pre class="brush:js;toolbar:false;">$("span").ready(function() { var Buchstaben = $("span").length; for (sei i = 0; i <= Buchstaben; i++) { $("span")[i].css("color", "red"); } })</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</script> H E L L O , W O R L D</pre>

P粉613735289

Antworte allen(2)

P粉5210131232023-09-01 10:14:21 2 Etage

你走在正確的軌道上，但是你需要延遲改變color的時(shí)間（比如說100ms），這樣效果才能被看到。為了延遲，我們使用了接受2個(gè)參數(shù)的方法setTimeout：

一個(gè)回調(diào)函數(shù)，在所需延遲時(shí)間過后被調(diào)用。
所需的延遲時(shí)間（比如100ms）。

當(dāng)選擇一個(gè)延遲時(shí)間，比如100ms，我們應(yīng)該將其乘以當(dāng)前字母的索引（準(zhǔn)確地說是當(dāng)前的span），這樣效果才能被看到。

這是一個(gè)實(shí)時(shí)演示：

/**
 * 循環(huán)遍歷“span”元素。
 * 延遲100ms * i（當(dāng)前span索引），以便稍后改變索引為“i”的span的顏色。
 * 你可以根據(jù)需要更改延遲時(shí)間（在這個(gè)例子中是100）。
 */
$('span').each((i, el) => setTimeout(() => $(el).css('color', 'red'), i * 100))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>

Wie +0

Antwort hinzufügen

P粉8659009942023-09-01 00:21:23 1 Etage

在jQuery中，你可以使用each函數(shù)來循環(huán)遍歷選擇器的所有元素

為了在兩次顏色變化之間“等待”，你可以將CSS變化嵌入到setTimeout函數(shù)中，鏈接到each循環(huán)的索引

$(".letters span").each(function(index, elem) {
  setTimeout(function() {
    $(elem).css('color', 'red');
  }, index * 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="letters">
  <span>H</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
  <span>O</span>
  <span>, </span>
  <span>W</span>
  <span>O</span>
  <span>R</span>
  <span>L</span>
  <span>D</span>
</div>

Wie +0

Antwort hinzufügen