Question

我有以下功能。

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应该从顶部向下滑动，显示其消息，然后再次3secs slideUp。

任何想法为什么只有slideUp可以正常用作动画，但是slideDown会跳转到没有动画？

Answer 1

问题在于你的CSS。删除display:block和success课程中的warning声明即可。

Answer 2

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

$('.notificationBox').slideDown( function() {
    $('.notificationBox').delay(3000).slideUp();
});

Answer 3

从display:block和.success类中删除.warning后，它应该按原样运行，并让jquery处理..

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

Answer 4

我试过你的代码。我添加了两个按钮来调用函数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（）

中检查 type 之前添加此代码

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

另请访问http://jqueryfordesigners.com/slidedown-animation-jump-revisited/。 JQuery有一个bug。这个链接可以帮到你。

jQuery：slideDown会跳转

4 个答案: