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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...