質問編集履歴
1
コードと質問文の変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
なぜ時間差で表示されないのでしょうか？
|
body
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
hover時のみopacity:0のテキストを時間差でランダムにopacity:1にしたいのですが、
|
|
2
|
-
現在はhover時にランダムで一文字のみしか表示出来ず、randomメソッドも値が重複してしまうため何度もhoverしなければ全ての文字が表示されません。
|
|
3
|
-
|
|
1
|
+
ランダムに時間差で表示されるよう実装してみたのですが、
|
|
2
|
+
どうしても時間差で表示されません。
|
|
3
|
+
どうすれば時間差で表示されるでしょうか？
|
|
4
4
|
|
|
5
|
-
どうすれば一度のhoverで全ての文字をランダムに時間差で表示し、hoverを外すタイミングで表示を無くせるのか教えて頂きたいです。
|
|
6
|
-
ど
|
|
5
|
+
ご教授のほどよろしくお願いいたします。
|
|
7
6
|
|
|
8
7
|
```HTML
|
|
9
8
|
<div id="str">
|
|
@@ -31,12 +30,13 @@
|
|
|
31
30
|
```js
|
|
32
31
|
document.querySelector('#str').addEventListener('mouseover',()=>{
|
|
33
32
|
const span = document.querySelector('#str').children;
|
|
33
|
+
for(let i = 0;i<50;i++){
|
|
34
|
-
|
|
34
|
+
const ran = Math.floor(Math.random()* span.length);
|
|
35
|
-
|
|
36
|
-
for(let i = 0;i<span.length;i++){
|
|
37
|
-
|
|
35
|
+
if(!span[ran].classList.contains('see')){
|
|
36
|
+
setTimeout(() => {
|
|
38
|
-
|
|
37
|
+
span[ran].classList.add('see');
|
|
38
|
+
},100);
|
|
39
|
-
|
|
39
|
+
}
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
42
|
```
|