JQuery HTML text change animation

Question

I am trying to change the text of an HTML element using javascript and jquery. This is my code so far, and I cannot get it to work. I was looking for him and could not find anything on him.

$("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 appreciated.

Answer 1

The way you currently do the syntax is wrong, also you cannot animate the text as such, instead you will need to animate the element containing the text. It is also unclear what purpose you want to revive. Here are a few examples:

Opacity Animation:

 $("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

Animation 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

Answer 2

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

JsFiddle example

Answer 3

You can also try this.

 $("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"); }); 

Answer 4

The text cannot be really encouraged, you can change the content using the html method. Lettering.js is a plugin for more visual display of text. http://letteringjs.com/

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

Answer 5

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

Answer 6

I have encoded one plugin for this purpose, you can check it on github: jquery-bubble-text .

You can use it as follows:

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

See one example in jsfiddle .

I hope you will like it:)