Jump to content
funbinod

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').text('hello');
		$('#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...

Share this post


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

            });

Share this post


Link to post
Share on other sites

i thought that $('#msg').text is not working better to try it

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

 

Share this post


Link to post
Share on other sites

you can try to set interval method:

Jquery:

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

Html:

<button>Click me</button>
<div id="word"></div>

Share this post


Link to post
Share on other sites

Please do not reply to old topics.

Share this post


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.

Guest
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.

Loading...

×
×
  • Create New...