Jquery how to change text value of div with an effect

问题

I am able to change inside of div with the following code

$(".mydivclass").html("my data");

Now if possible i want to add an effect like show (delay) or something other. How can i do that when changing the data inside div. Thank you

回答1:

A little simple example using fading effect.

HTML

<div id="sometext">
    Start text 
</div>

JS

$("#sometext").fadeOut(function() {
  $(this).text("change!").fadeIn();
});

Fiddle on : http://jsfiddle.net/uxhE2/

回答2:

Basically what you need to do is chaining different jquery methods. E.g. this would be a simple hide and show effect.

$(".mydivclass").hide().html("my data").show('slow');

If you prefer some hiding effect, which is time based, you need to define your "show" effect inside a callback, like PeeHaa illustrated. Otherwise the effects won't be "queued" and the show effect will start before the hiding has finished.

回答3:

You could add an element dynamically and made the content fade in

$("<span id='myData'>my data</span>").hide().appendTo(".mydivclass");
$("#myData").fadeIn()

Here's an example : http://jsfiddle.net/MqhdG/

回答4:

Because you say any effect what about:

$(".mydivclass").slideUp('slow', function() {
  $(".mydivclass").html('data');
  $(".mydivclass").slideDown('slow');
});

来源：https://stackoverflow.com/questions/8202087/jquery-how-to-change-text-value-of-div-with-an-effect