change texts on a div using jquery

[funbinod]

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

[dsonesuk]

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

            });

[sandeepm]

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!');
});

 

[dsonesuk]

Jquery html() on its own, does not animate, it does not queue therefore delay() will not work.

[Sherin]

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>

[Ingolme]

Please do not reply to old topics.