Btw i added the delay function and achieved a closer result.

$(document).ready(function(){
$("#show-alert").click(function(){
$("#quick-alert").fadeIn(30).delay(3000)fadeOut(10);
});
});

I’m not really seeing how your solution offers any improvement, and it certainly doesn’t have the same result unless you assume that the message is in the HTML to begin with. But to answer your question, the additional jQuery that I propose above has two parts:

1. Insertion/removal of the element. Often this kind of content doesn’t really belong in the HTML, so inserting it dynamically and then removing it after the message is displayed for a while seems (to me at least) like a reasonable thing to do.
2. The delay. I much prefer having a message remain fully visible for a time over having it fade out as soon as it has finished fading in. Chaining a .delay() method, or even using the .animate() trick, is trivial in terms of both the extra code and the extra time it takes to write it.

So, let’s say for the sake of argument that we do already have the message in the HTML. The script I initially proposed would look like this:

$(document).ready(function() {
  $('#show-alert').click(function() {
    $('div.quick-alert')
    .fadeIn('slow')
    .animate({opacity: 1.0}, 3000)
    .fadeOut('slow');
  });
});

Or, as of jQuery 1.4:

$(document).ready(function() {
  $('#show-alert').click(function() {
    $('div.quick-alert')
    .fadeIn('slow')
    .delay(3000)
    .fadeOut('slow');
  });
});

The only extra code is in bold — which makes your supermarket analogy seem like a stretch at best.

JQuery

$(document).ready(function(){
$("#show-alert").click(function(){
$("#quick-alert").fadeIn("slow").fadeOut(3000);
});
});

HTML

->Button with and id of "show-alert" here<--
Alert!Watch me before its too late!

CSS

#quick-alert {
 width: 150px;
height:60px;
   padding: .5px;
   background: #ffa;
   border: 1px solid #a00;
   color: #a00;
   font-weight: bold;
   display: none;
}

Just wondering why,would be really thankful if someone answers this.
Its like you can head to the supermarket by following road 1 which is full of corners ,when you can use road 2 which is a straight line.

I can’t. Now view source. The second one uses ', which as far as I can tell, is meant for apostrophes.

Anyway, thanks for this little diversion.

You should type it’s, not it’s. ’ is not single quote. Qutes used for, uh, quotations. It’sapostrophecalled apostrophe.

.fadeIn("medium", function() { setTimeout("$j('#comwarning').fadeOut('slow')", 3000) } );

A little less jQuery-likely, but contained in one line :)

See you

Is there a fix? Really like the code, thank you…

I’m adapting this as a way to prevent doubleclicking a submit button, without locking down the button permanently, because we have validation on the form, so it may need to be resubmitted.

$(document).ready(function() {
		$(':submit').click(function() {
			$original = $(this).val();
			$(this).val('Saving, please wait...')
			.attr("disabled","disabled")
			.fadeIn('slow')
			.animate({opacity: 0.4}, 4000)
			.fadeIn('slow', function() {
				$(this).val($original).removeAttr("disabled").animate({opacity: 1}, 2000)
			});
		});
});

my problem is that it’s conflicting with the Jquery validation plugin: prevents it from showing its error spans.