Comments on: Slide In and Slide Out Status Message Box using jQuery

By: Bradley Reed

Bradley Reed — Wed, 17 Feb 2010 08:35:15 +0000

How could I call this as a simple javascript function to say something like “Login Success!” when the login is successful.

By: admin

admin — Wed, 25 Mar 2009 18:18:25 +0000

Hi Mike,

Here is the entire code with “stop()” function

$(document).ready(function(){
$(“.req_img”).fadeTo(“slow”, 0.5); // When page loads, set the opacity of images to 50%
$(“.req_img”).hover(function(){
$(this).fadeTo(“slow”, 1.0); // On mouse hover, set the opacity of images to 100%
$(“#statusText”).text($(this).attr(‘alt’)); // Capture the ‘alt’ attribute values of images
$(“#messagebox”).stop().animate({opacity: “show”, top: “0″}, “slow”); // show message box with slow opacity
},function(){
$(this).fadeTo(“slow”, 0.5); // On Mouseout set the opacity to 50%
$(“#messagebox”).stop().animate({opacity: “hide”, top: “-300″}, “slow”); // hide message box with slow opacity
});
});

I will update the code accordingly…. Once again, thanks for your valuable comment.

Thanks,
Vivek

By: admin

admin — Wed, 25 Mar 2009 03:17:21 +0000

Hi Mike,

Thanks for your valuable comment, will check on it and will let you know Mike.

Thanks,
Vivek

By: Mike Dedmon

Mike Dedmon — Wed, 25 Mar 2009 02:36:36 +0000

I’m definitely a beginner with jquery. After playing with the demo, I noticed that the animation “builds” when I hover/no hover quickly. I’ve seen someone use the “stop()” function in other tuts. Wouldn’t you use that here? How would you use it? I’ve tried putting it inline before the animate() and .fadeTo() functions, but it doesn’t seem to work completely right. Eventually the messagebox becomes hidden and I can’t get it back without a refresh.

Any ideas?