Jump to content

change texts on a div using jquery


Recommended Posts

hello all!


i am trying to change texts on a div multiple times using jquery.


for this i tried the following

	$('#clickme').on('click', function(e) {
		$('#msg').delay(500).text('First Change!');
		$('#msg').delay(500).text('Second Change!');

but this olny displays directly the last option (i.e. 'Second Change!') and none of other. i wish them to change one by one with some delay.


please guide me how can i achieve this.


thank u in advance...

Link to comment
Share on other sites

Delay() works for queued animation effects only, with this IF you place delay of for each change of messages, it will just run through all without stopping till it reaches the last. You need to apply an animation effect, and nest each delay change function, so delay is triggered, but only after the animation of current triggering function is finished will it move to the next.

            $('#clickme').on('click', function() {
                $('#msg').text('hello').delay(500).fadeIn(function() {
                 $('#msg').text('First Change').delay(500).fadeIn(function() {
                 $('#msg').text('Second Change!').delay(500).fadeIn();

Link to comment
Share on other sites

  • 2 months later...
  • 2 years later...

you can try to set interval method:


  $(function () {
            $("button").click(function () {
                count = 0;
                wordsArray = ["First Text", "Second Text", "Third Text"];
                setInterval(function () {
                    $("#word").fadeOut(400, function () {
                        $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400);
                }, 2000);


<button>Click me</button>
<div id="word"></div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...