jQuery | on click fade out and / or automatically fade out

814 views Asked by At

Why is the following code not working? only the delayed fade out is working. Not the click event. If i comment the auto-fade out the click event is working. And how could i shorten the code?

Thanks for your help! :)

var wooMessage = $('.woocommerce-message'); 
var wooError = $('.woocommerce-error'); 

wooMessage.delay(9000).fadeOut(160);
wooError.delay(9000).fadeOut(160);

$('.woocommerce-message-close').click(function() {
    wooMessage.fadeOut(160);
});
$('.woocommerce-error-close').click(function() {
    wooError.fadeOut(160);
}); 
1

There are 1 answers

0
marvwhere On BEST ANSWER

ok got it after created my own jsfiddle for it - u "blocking" the woo-elements with the delay so there is already a animation going on u need to stop them first...then its working with the click

var wooMessage = $('.woocommerce-message'); 
var wooError = $('.woocommerce-error'); 

wooMessage.delay(9000).fadeOut(160);
wooError.delay(9000).fadeOut(160);

$('.woocommerce-message-close').click(function() {
    wooMessage.stop().fadeOut(160);
});
$('.woocommerce-error-close').click(function() {
    wooError.stop().fadeOut(160);
});