html text change,Animating HTML Text Change jQuery

问题

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.

回答1:

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

回答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

回答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");

});

回答4:

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

});

回答5:

Typing Style

Hello World!

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

回答6:

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

来源：https://stackoverflow.com/questions/17204009/animating-html-text-change-jquery