Animating HTML Text Change jQuery

Question

I am attempting to change the text of a HTML element using javascript and jquery. This is my code so far, and I can't seem to get it to work. I have googled it and can't seem to find anything on it.

$("div#title").hover(
    function() {
        $(this).stop().animate({
            $("div#title").html("Hello")
        }, "fast");
    },
    function(){
        $(this).stop.animate({
            $("div#title").html("Good Bye")
        }, "fast");
    }
);

Any help would be greatly apreciated.

What do you want to animate here?

Bemmu
– Bemmu

2013-06-20 02:02:30 +00:00
Commented Jun 20, 2013 at 2:02 — Bemmu
– Bemmu, Commented Jun 20, 2013 at 2:02

Shaddow · Accepted Answer · 2013-06-20 01:59:34Z

7

$("div#title").hover(
    function () {
        $(this).stop().html("Hello").hide(0).fadeIn("fast");
    },
    function () {
        $(this).stop().html("Good Bye").hide(0).fadeIn("fast");
    }
);

jsFiddle example

answered Jun 20, 2013 at 1:59

Shaddow

3,2333 gold badges25 silver badges42 bronze badges

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

Comments

PSL · Accepted Answer · 2013-06-20 02:11:31Z

The way you are doing currently the syntax is incorrect, also you cannot animate a text as such instead you would need to animate an element holding the text. Also not clear on what peoprty you want to animate, Here couple of examples:

Animating Opacity:

$("div#title").hover(

function () {
    $(this).stop().css('opacity', '0').html(function (_, oldText) { // Set the opacity of the div to 0 and then change the html (flip it based on last value)
        return oldText == 'Good Bye' ? 'Hello' : 'Good Bye'
    }).animate({
        opacity: 1 // Animate opacity to 1 with a duration of 2 sec
    }, 2000);
});

Fiddle

Animating Width:

$("div#title").hover(

function () {
    $(this).stop().animate({
        'width': '0px'  // Animate the width to 0px from current width
    }, 2000, function () {  // On completion change the text
        $(this).html(function (_, oldText) {
            return oldText == 'Good Bye' ? 'Hello' : 'Good Bye'
        }).animate({          // and animate back to 300px width.
            'width': '300px'
        }, 2000);
    })
});

Fiddle

Shinov T · Accepted Answer · 2016-09-24 15:21:22Z

3

You can try this also

$("div#title").hover(
   function() {
       $(this).stop().fadeOut("slow",function(){ 
                $(this).html("Hello")
            }).fadeIn("slow");
},
   function(){
       $(this).stop().fadeOut("slow", function(){
                $(this).html("Good Bye")
            }).fadeIn("slow");
});

edited Sep 24, 2016 at 15:21

answered Jun 20, 2013 at 4:45

Shinov T

8625 silver badges9 bronze badges

Comments

GuybrushThreepwood · Accepted Answer · 2013-06-20 01:55:10Z

2

The text can not really encouraged, you can change the content using html method. Lettering.js is a plugin to play in a more visual with text. http://letteringjs.com/

$("#title").hover(function(){
    $(this).html("Hello");
},function(){
    $(this).html("Good Bye");
});

answered Jun 20, 2013 at 1:55

GuybrushThreepwood

1536 bronze badges

Comments

Moss · Accepted Answer · 2013-11-21 04:31:23Z

2

Typing Style

<font size="7" style="position:absolute; left:0px; top:0px; width:150px; z-index:50;">Hello World!</font>
    <div id="test" style="position:absolute; left:0px; top:0px; height:100px; width:150px; z-index:60; background-color: #ffffff;"></div>

$('#test').animate({"left" : "150"}, 2000);

answered Nov 21, 2013 at 4:31

Moss

211 bronze badge

Comments

Washington Guedes · Accepted Answer · 2016-10-20 18:30:47Z

2

I've coded one plugin for that purpose, you can check it on github: jquery-bubble-text.

You can use it this way:

bubbleText({
    element: $element,      // must be one DOM leaf node
    newText: 'new Text',    // must be one string
});

Look one example in this jsfiddle.

Hope you enjoy it :)

edited Oct 20, 2016 at 18:30

answered Jun 17, 2016 at 17:26

Washington Guedes

4,3753 gold badges35 silver badges59 bronze badges

Collectives™ on Stack Overflow

Animating HTML Text Change jQuery

6 Answers 6

Comments

Fiddle

Fiddle

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related