Trying to create a notification popup... The notification overlaps the divs underneath it even after fadeTo()?
I’m trying to create a notification popup (similar to YouTube’s when you add a video to your watch-later or something). This is my attempt:
(
jsfiddle here
)
- $('#notification-box').hide();
- $('body').on("click", "#enableSuspension", function(){
- $('#notification-box').append('<p>Client suspension enabled.</p>').fadeTo(1000, 1, function(){
- $('#notification-box, #notification-box p').fadeTo(1000, 0);
- });
- });
However, it doesn’t function well at all. I want each individual notification to stay visible for 1 second and then fade out. Currently, if you click the button a couple times after each other, all the notifications fade out at once, they don't wait in a 'queue' for the next one to stay visible for 1 second.
Also, the notifications are not really hiding when I call this method
- fadeTo(1000, 0, callback)
and I figured that out when I tried clicking the button after about 5 clicks. It's like something is between the cursor and the button. So I tried remove() as the function callback, but then the notification wouldn’t appear the next time the button is clicked. I thought fadeOut() is equivalent to the css property "display:none"?
Can anyone tell me where I’m going wrong in trying to make this function work the way YouTube’s does?