Jquery to setTimeout()



>我有来自网络的代码(https://codepen.io/aleksander-koty/pen/yEgxVg(

开始动画 从两个 lettes C T
结束动画: Caaa Taana (所有文本(

但我不想要带滚动的开放文本哦不不不.. 我想在 3 秒后创建动画到 3 秒,文本应该再次更改为两个字母。只能执行一次,不能循环。

如何用 JAVASCRIPT 或 JQUERY 编写这个

如果你这么善良。我将不胜感激。这种帮助将极大地影响我的练习

我有代码:

JavaScript

$(function() {
var text = $(".text");
var textT = $(".textT");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
text.removeClass("hidden");
textT.removeClass("hidden");
} else {
text.addClass("hidden");
textT.addClass("hidden");
}
});
});

.HTML

<ul class="text hidden">
<li>C</li>
<li class="ghost">a</li>
<li class="ghost">a</li>
<li class="ghost">a</li>
<li class="ghost">a</li>
</ul>
<ul class="textT hidden">
<li>C</li>
<li class="ghost">v</li>
<li class="ghost">v</li>
<li class="ghost">a</li>
<li class="ghost">a</li>
</ul>

.CSS

@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
height: 200vh;
font-family: 'Muli', sans-serif;
}
.text {
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
list-style: none;
border-bottom: 0;
}
.textT {
position: fixed;
top: 56%;
left: 47%;
transform: translateX(-50%) translateY(-50%);
list-style: none;
border-bottom: 0;
}


.text.hidden {
border-bottom: 1px solid #fff;
}
.textT.hidden {
border-bottom: 1px solid #fff;
}
.text li {
display: inline-block;
float: left;
font-weight: 700;
font-size: 2em;
color: #fff;
opacity: 1;
transition: all 0.5s ease-in-out;
max-width: 2em;
}
.textT li {
display: inline-block;
float: left;
font-weight: 700;
font-size: 2em;
color: #fff;
opacity: 1;
transition: all 1s ease-in-out;
max-width: 2em;
}

.text.hidden li.spaced {
padding-left: 0;
}
.text li.spaced {
padding-left: 0.5em;
}
.text.hidden li.ghost {
opacity: 0;
max-width: 0;
}

.textT.hidden li.spaced {
padding-left: 0;
}
.textT li.spaced {
padding-left: 0.5em;
}
.textT.hidden li.ghost {
opacity: 0;
max-width: 0;
}

请删除。 解决方案是:

$(document).ready(function() {
var text = $(".text");
var textT = $(".textT");
setTimeout(function() {
text.removeClass("hidden");
textT.removeClass("hidden");
}, 1000);
setTimeout(function() {
text.addClass("hidden");
textT.addClass("hidden");
}, 9000); 
});  

最新更新