如何使用JavaScript/jquery暂停或延迟动画 [英] How to pause or delay animation using JavaScript/jquery

问题描述

这是我正在做的文字动画: http://jsfiddle.net/4DJe6/

Here is the text animation I am doing: 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??

这是代码: HTML

<div><span id="black">Waiting for the task!</span><span id="red">Waiting for the task!</span></div>

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

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.

请提出建议.

推荐答案

请执行以下操作:

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);

更新了小提琴此处.

我希望这会有所帮助！

这篇关于如何使用JavaScript/jquery暂停或延迟动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！