fadeOut

[aeroswat]

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

[Psycho]

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.

[Adam]

I've never implemented it myself but this may be of use to you: jQuery's stop() method.

[RichardRotterdam]

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>