[英]How to pause or delay animation using JavaScript/jquery
Here is the text animation I am doing: http://jsfiddle.net/4DJe6/ 这是我正在做的文字动画: http : //jsfiddle.net/4DJe6/
I want the animation to pause for a second so the user can read the full text in red once and then it should start: 我希望动画暂停一秒钟,以便用户可以阅读一次红色的全文,然后应该开始:
Any suggestion how can I add a second pause?? 有什么建议可以添加第二个暂停吗?
Here is the code: HTML 这是代码: HTML
<div><span id="black">Waiting for the task!</span><span id="red">Waiting for the task!</span></div>
CSS 的CSS
#black{
color:black;
font-weight:bold;
font-size:2em;
}
#red {
position:absolute;
z-index:10;
left:0px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
}
div {
display: inline-block;
position: relative;
}
html {
text-align: center;
}
JS JS
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function(){
console.log(red.style.width);
if(red.style.width == "288px")
{
red.style.width = "0px";}
red.style.width = parseInt(red.style.width,10)+1 +"px";},30);
Let me know if you need any other information. 让我知道您是否需要其他信息。
Please suggest. 请提出建议。
The following should do it: 请执行以下操作:
var red = document.getElementById('red');
red.style.width = "0px";
var black = document.getElementById('black');
// Add Var to Keep Track of Pause
var pauser = 0;
var animation = setInterval(function(){
if(red.style.width == "288px"){
pauser += 34; // Increase Pause
// Pause is Greater Than 1s
if (pauser >= 1000){
red.style.width = "0px"; // Reset Animation
pauser = 0; // Reset Pause
}
} else {
red.style.width = parseInt(red.style.width,10)+1 +"px";
}
}, 30);
Updated Fiddle Here . 更新小提琴这里 。
I Hope this helps! 我希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.