jQuery fadeOut() and clicking issue

This is for a returner, as part of a PHP-driven CMS.

We want the returner (if has class admin) to add the div hide, which is a little X button. The returner should automatically fadeOut() after 4 seconds, or to fadeOut() if the user clicks on the hide button.

Each of the //HERE codes work on their own, but together it will only run the delayed fadeOut() and not the clicked one!

Any help would be great. Thanks, Nick.

$(".success, .info, .warning, .error").each(functio开发者_如何学运维n(){
    if(!$(this).hasClass("admin")){
        $(this).append('<div class="hide"></div>');
        $(this).delay(4000).fadeOut(); // HERE
    }
});
$(".hide").click(function(){
    $(this).parent().fadeOut(); // HERE
});

---

since .hide is appended dynamically you need to use .live() (or delegate) for the click handler to function correctly.

Since you are using a delay() try to call .stop() on the parent to clear the delay to run the fade out animation.

$(".hide").live('click', function(){
    $(this).parent().stop().fadeOut(); // HERE
});

Example of it on jsfiddle.

---

if($(this).hasClass("admin")){}else{

This line can be cleaner by using an ! before the $

if ( !$(this).hasClass("admin") ) {

That avoids the unneeded if/else. Can you post some HTML to see what parent() is referring to?