aeroswat Posted January 19, 2010 Share Posted January 19, 2010 Is there a way to stop a fadeOut() before it's finished? I have an update function that when you tab through a form it auto updates that part of the database. Every time it updates it shows a msg at the bottom that says either it was updated or there was an error then it slowly fades out. Problem is if the previous fade isn't finished it just keeps fading until it is finished. I want a call to update to start the message div from it's original state instead of it's mid-fade state and then do the fade that it needs to. I tried putting a hide() first but it didn't work. function update(fInp, valu) { var ord = document.getElementById('ctrordernumber').value; var upd = 0; $('#errDiv').hide(); if(fInp.length != 0 && valu.length != 0){ $.ajax({ type: "POST", url: "updateorder-exec.php", data: "field="+fInp+"&val="+valu+"&on="+ord+"", async: false, success: function(msg){ var msg=msg.substr(0,msg.search("#STOP#")); if(msg.length >0) { if(msg == 1) { $('#errDiv').show(); $('#errDiv').html("<h3><b>Database updated!</b></h3>"); $('#errDiv').fadeOut(4000); upd = 1; }else { $('#errDiv').show(); $('#errDiv').html("<h3><b>Error. Incorrect information entered!</b></h3>"); $('#errDiv').fadeOut(4000); } } } }); } else{ $('#errDiv').show(); $('#errDiv').html("Error. Incorrect information entered!"); $('#errDiv').css('opacity',100).fadeOut(10000); } return upd; } Quote Link to comment Share on other sites More sharing options...
Psycho Posted January 19, 2010 Share Posted January 19, 2010 Yes it is possible, but because you are using JQuery you "may" not be able to do it as easily. Typically a fade uses a settimeout() loop that repeats until the process is done. Simply interject an additional condition to check to determine whether the loop should repeat. For example, have a variable called runFadeOut and have the default value set to true. The loop would check that the fade is not complete AND that that variable equals true. If both are ture then the loop is repeated via settimeout(). So, if a new action takes place that you want to stop the current fadeout, that process would first set runFadeOut to fase to stop any current fade outs. But, as stated above you are using built in functions from JQuery, so standard JavaScript will not help. Perhaps someone with JQuery knowledge knows of a workaround. Quote Link to comment Share on other sites More sharing options...
Adam Posted January 19, 2010 Share Posted January 19, 2010 I've never implemented it myself but this may be of use to you: jQuery's stop() method. Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted January 20, 2010 Share Posted January 20, 2010 Instead of trying to stop the fade animation why not create a new element with a message and fade that one out? Here is an example: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#add").click(function(){ // create new div element with content var error_msg = $('<div class="error_msg">an error occured!</div>'); // add the error message to the error container error_msg.appendTo("#error_container"); // fade out the error message and remove the message from the dom when done error_msg.fadeOut(2000,function(){ $(this).remove(); }); }); }); </script> <a href=# id="add">add message</a> <div id="error_container"></div> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.