funbinod Posted February 1, 2017 Share Posted February 1, 2017 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... Link to comment Share on other sites More sharing options...
dsonesuk Posted February 1, 2017 Share Posted February 1, 2017 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 More sharing options...
sandeepm Posted April 14, 2017 Share Posted April 14, 2017 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!'); }); Link to comment Share on other sites More sharing options...
dsonesuk Posted April 14, 2017 Share Posted April 14, 2017 Jquery html() on its own, does not animate, it does not queue therefore delay() will not work. Link to comment Share on other sites More sharing options...
Sherin Posted March 11, 2020 Share Posted March 11, 2020 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> Link to comment Share on other sites More sharing options...
Ingolme Posted March 11, 2020 Share Posted March 11, 2020 Please do not reply to old topics. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now