Let's move on to the pursuit, here is Fiddle: http://jsfiddle.net/B7Uyj/1/
Here are my current jQuery functions that handle the slideUp () and slideDown () functions:
var mostRecent = ""; var timeoutID = null; $(".notif_button").click(function(e) { e.stopPropagation(); window.clearTimeout(timeoutID); mostRecent = $(this).parent().attr('id'); $(this).parent().fadeOut('300'); $("#hide_notification").slideDown('slow'); timeoutID = window.setTimeout(function() { $("#hide_notification").slideUp('slow'); }, 10000); }); $("#undo_notif").click(function(e) { e.stopPropagation(); $("#" + mostRecent).fadeIn('300'); $("#hide_notification").slideUp('slow'); window.clearTimeout(timeoutID); });
I did not upload the “x” image that I am using, but if you click in areas where the image is missing (in the upper right corner of the small notification window), you can see how this works.
The problem I am facing is that when I use the slideUp () and slideDown () functions, you can see the rounded corners of the div that are moving, and it doesn't seem like the “cancellation notice” really came from the bottom of it parent container. It's not a mistake; what exactly should it work. My question is, is there a way to make it look like the yellow div that appears is NOT separated from its parent? This is difficult to explain, so please ask if you need clarification. I assume that a dynamic change in the border radius occurs when the slideUp () or slideDown () action is performed.
Thank you for your help!
source share