jquery - Do next method once this one is complete -
this question has answer here:
- jquery - wait till end of slideup() 2 answers
i want html element removed after finished sliding up. remove executed immediately.
$(document).ready(function() { $(':button').on('click', function() { $("body").prepend("<div class='messagebox'>dsds</div>"); $(".messagebox").text('you wot!').slideup(0).slidedown("slow"); settimeout(function() { $(".messagebox").slideup("slow"); //wait till finish then.... $(".messagebox").remove(); }, 2000); }); });.messagebox { background: blue; color: #fff; padding: 20px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1> settings </h1> <h3> bla bla bla bla </h3> <input type="button" value="save" id="save" /> <input type="button" value="error" id="savee" />
try :
settimeout(function() { $(".messagebox").slideup("slow",function(){ $(".messagebox").remove(); }) }, 2000); final code :
<!doctype html> <html lang="en"> <head> <style> .messagebox { background: blue; color: #fff; padding: 20px; } </style> </head> <body> <h1>settings</h1> <h3>bla bla bla bla</h3> <input type="button" value="save" id="save" /> <input type="button" value="error" id="savee" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function() { $(':button').on('click', function() { $("body").prepend("<div class='messagebox'>dsds</div>"); $(".messagebox").text('you wot!').slideup(0).slidedown("slow"); settimeout(function() { $(".messagebox").slideup("slow",function(){ $(".messagebox").remove(); }) },2000); }) }) </script> </body> </html>
Comments
Post a Comment