1

我有以下功能。

function notificationBoxOutput(type, message) {
    if (type == "success") { $('.notificationBox').removeClass('warning').addClass('success'); }
    if (type == "warning") { $('.notificationBox').removeClass('success').addClass('warning'); }
    $('.notificationBox').html('<b>' + type + ':</b>&nbsp;' + message);
    $('.notificationBox').slideDown().delay(3000).slideUp();
}

和下面的CSS

div.notificationBox
{
    top: 0px;
    left: 0px;
    width: 100%;
    position: fixed;
    z-index: 3;
    background: #333333;
    text-align: center;
    vertical-align: center;
    opacity:0.85;
    filter:alpha(opacity=85);
    display: none;
}

div.warning { background-color: #990000; display: block; }
div.success { background: #009900; display: block; }

因此，当函数被触发时，notificationBox 应该从顶部向下滑动，显示其消息并在 3 秒后再次向上滑动。

知道为什么只有 slideUp 作为动画效果很好，但 slideDown 没有动画就跳到了吗？

4

4 回答 4

1

问题出在您的 CSS 中。删除display:block您success和warning类中的声明，它将起作用。

于 2011-07-26T06:56:39.150 回答
0

一旦你display:block从.success和.warning类中删除它，它应该按原样工作，并让 jquery 处理它。

http://jsfiddle.net/gaby/Qznrk/3/上的示例
（更改代码以存储对通知的引用并使用它，并将一些方法链接在一起......）

于 2011-07-26T07:07:32.580 回答
0

尝试用这个替换你的jquery的最后一行......

$('.notificationBox').slideDown( function() {
    $('.notificationBox').delay(3000).slideUp();
});
于 2011-07-26T06:48:54.770 回答
0

我试过你的代码。我添加了两个按钮来调用函数notificationBoxOutput。

<html><head>
<script language="javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function notificationBoxOutput(type, message) {
    if (type == "success") {
       $('.notificationBox').removeClass('warning').addClass('success'); }
    if (type == "warning") { 
        $('.notificationBox').removeClass('success').addClass('warning'); }
    $('.notificationBox').html('<b>' + type + ':</b>&nbsp;' + message);
    $('.notificationBox').slideDown().delay(3000).slideUp();
}
</script>
<style>
div.notificationBox
{
    top: 0px;
    left: 0px;
    width: 100%;
    position: fixed;
    z-index: 3;
    background: #333333;
    text-align: center;
    vertical-align: center;
    opacity:0.85;
    filter:alpha(opacity=85);
    display: none;
}

div.warning { background-color: #990000; display: block; }
div.success { background: #009900; display: block; }
</style>
</head><body>
    <div class="notificationBox">Hi</div>
    <button onclick='notificationBoxOutput("success","success")' >success</button>
    <button onclick='notificationBoxOutput("warning","warning")' >warning</button>
</body></html>

我发现只有当我先点击成功按钮然后在 3000 毫秒之前点击警告按钮时才会发生跳跃问题。当我们先单击警告按钮，然后在 3 秒内单击成功按钮时，也会发生这种情况。

要解决此问题，请在检查 notificationBoxOutput() 类型之前添加此代码

$('.notificationBox').hide();

另请访问http://jqueryfordesigners.com/slidedown-animation-jump-revisited/。JQuery 有一个错误。此链接可能会对您有所帮助。

于 2011-07-26T07:52:24.487 回答