让我们切入追逐,这里是小提琴: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);
});
Run Code Online (Sandbox Code Playgroud)
我没有上传我正在使用的"x"图像,但是如果你点击图像缺失的区域(在小通知窗口的右上角),你可以看到它的功能如何.
我遇到的问题是,当我使用slideUp()和slideDown()函数时,你可以看到正在移动的div的圆角,它看起来不像真正从底部出现的"撤消通知"它的父容器.这不是错误; 这正是它应该如何运作的.我的问题是,有没有办法让它看起来好像弹出的黄色div没有与它的父母分开?这很难解释,所以请询问您是否需要澄清.我的猜测是在slideUp()或slideDown()动作发生时动态改变边界半径.
谢谢你的帮助!