6

让我们切入正题，这里是小提琴：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 的圆角，并且看起来不像“撤消通知”真正从底部出现它的父容器。这不是错误；这正是它应该如何工作的。我的问题是，有没有办法让它看起来好像弹出的黄色 div 没有与其父级分开？这很难解释，所以请询问您是否需要澄清。我的猜测是在 slideUp() 或 slideDown() 动作发生时动态更改边框半径。

谢谢你的帮助！

4

1 回答 1

2

只是设置overflow:hidden;为容器似乎可以解决它：

http://jsfiddle.net/B7Uyj/5/

于 2013-06-19T16:46:44.573 回答