Search code examples
jqueryjquery-animateslidedownslideup

jQuery: slideDown does jump

i have the following function.

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();
}

and the following 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; }

So when the function is fired the notificationBox should slideDown from top, show its message and after 3secs slideUp again.

Any idea why only slideUp works fine as animation but slideDown does jump to without animation?

Solution

  • The problem is in your CSS. Remove display:block declaration in your success and warning classes and it will work.