让我们切入正题,这是 fiddle :http://jsfiddle.net/B7Uyj/1/
这是我当前处理 slideUp() 和 slideDown() 功能的 jQuery 函数:
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);
});
我没有上传我正在使用的“x”图像,但是如果您单击图像丢失的区域(在小通知窗口的右上角),您可以看到它是如何工作的。
我遇到的问题是,当我使用 slideUp() 和 slideDown() 函数时,您可以看到正在移动的 div 的圆 Angular ,它看起来不像真正从中出现的“撤消通知”其父容器的底部。这不是错误;这正是它应该的工作方式。我的问题是,有没有办法让它看起来好像弹出的黄色 div 没有与其父级分开?这很难解释,所以请询问您是否需要澄清。我的猜测是在 slideUp() 或 slideDown() 操作发生时动态更改边框半径。
感谢您的帮助!
最佳答案
只需将 overflow:hidden;
设置为 container 似乎就可以解决这个问题:
关于带有圆 Angular 的 jQuery slideUp() 和 slideDown(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17196762/