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

Ibrahim Khan · Accepted Answer · 2015-11-30 06:50:28Z

0

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/

edited Nov 30, 2015 at 6:50

answered Nov 29, 2015 at 12:46

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user5530936 Over a year ago

thanks. how do i speed up the animation, and bring it back to Z when the user moves the mouse away ?

user5530936 Over a year ago

Thanks bro. and finally do i make the animation play completely once on hover. ( Previous example: when i hover over the 'z' it changes up to 'P' and there is a pause.. and then when i shake the pointer slightly, it resumes. How do i remove the pause and make it play continuously when i hover once Here's my fiddle jsfiddle.net/63utadgw/9

user5530936 Over a year ago

my previous comment ?

user5530936 Over a year ago

one last thing bro.. how can i add a 0.5 microsecond pause after each letter is changed [ eg. Z -animates to- E (0.5ms pause)-animates to-P (0.5ms pause) likewise ] and the last letter R is not at the center it sticks to the left... :)

Ibrahim Khan Over a year ago

You can use delay function to do a pause. I'm seeing all letters are at center. See updated answer.

Community · Accepted Answer · 2017-05-23 12:08:08Z

0

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

No need to use JavaScript

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Nov 29, 2015 at 12:16

caballerog

2,7591 gold badge22 silver badges32 bronze badges

Collectives™ on Stack Overflow

replacing text on hover using javascript?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related