replacing text on hover using javascript?

Question

Here's my fiddle demo.

Is there any javascript code to keep changing the 'Z' when hover ?

For eg. when i hover over the Z, it disappears and E takes its position from the right,and E disappears to the left and P takes its place from the right similarly this process continues to form the word Zephyr.

and when the user moves the pointer away. it should come back to Z .

.initials {
    position:absolute;
    background:{color:main color};
    background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
    color:white;
    margin-top:20px;
    padding-top:20px;
    padding-bottom:20px;
    width:60px;
    text-align:center;
    margin-left:20px;
    font-size:20px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15)
}

Answer 1

It is possible using CSS Animation. You can see this How to move text using CSS animation? .

No need to use JavaScript

Answer 2

Take look to the code below. Hope this will help you. To increase/decrease speed of animation change the animate function's third parameter to your time. Here time is in ms .

 $('.initials').mouseenter(function(){ for(var i=0; i<5; i++){ $('.letter:first').delay(500).animate({ marginLeft: '-=' + '70' }, 300); } }); $('.initials').mouseleave(function(){ $('.letter:first').animate({ marginLeft: '0' }, 1500); });

 .initials { position:absolute; background:{color:main color}; background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif"); color:white; padding-top:20px; padding-bottom:20px; width:60px; text-align:center; font-size:20px; letter-spacing:5px; box-shadow:0px 2px 3px rgba(0,0,0,.15); overflow: hidden; white-space: nowrap; } .letter{ width:60px; display: inline-block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="initials"> <div class="letter">Z</div> <div class="letter">e</div> <div class="letter">p</div> <div class="letter">h</div> <div class="letter">y</div> <div class="letter">r</div> </div>

JS Fiddle: http://jsfiddle.net/63utadgw/16/