how to set the absolute position div center align

Question

I want to show the text text masking effect with animation

Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/2/

I am not able to position the Red text in "center" above theblack text so the efffect should be something like this: http://jsfiddle.net/qTWTH/1/ * BUT aligned Center *

Also how to repeat the animation, this as per the JS, it just animate only once, I want to repeat the JS once the effect is done.

Code: HTML

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

CSS

#mainbox {
    width:600px;
    text-align:center;
}
#black {
    color:black;
    font-weight:bold;
    font-size:2em;
}
#red {
    position:absolute;
    z-index:10;
    left:8px;
    width:0px;
    overflow:hidden;
    font-weight:bold;
    font-size:2em;
    color:red;
    white-space:nowrap;
}

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 == "290px") clearInterval(animation);
    red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);

Let me know if you need any other information.

Please suggest.

Answer 1

Check this fiddle

By centering the div itself, and positioning the red according to that, you'll ensure they line up.

#mainbox {
    display: inline-block;
    position: relative;
}

html {
    text-align: center;
}

#red {
    left: 0;
}

Answer 2

To run it again and again change like this:

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 == "290px")
    {  
     red.style.width = "0px"; // here i have changed
}

    red.style.width = parseInt(red.style.width,10)+1 +"px";},50);

Correct fiddle: http://jsfiddle.net/arjun_chaudhary/qTWTH/22/

Answer 3

我略微更改了您的代码，您几乎拥有了它http://codepen.io/nighrage/pen/EAmeF/

Answer 4

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

#red {
    z-index:10;
    left:8px;
    width:0px;
    overflow:hidden;
    font-weight:bold;
    font-size:2em;
    color:red;
    white-space:nowrap;
    margin: 0 auto;
    margin-top: -37px;
}

change the second span for a div