JQuery: слайд-даун прыгает - PullRequest
Новая
       26

JQuery: слайд-даун прыгает

1 голос
/ 26 июля 2011

У меня есть следующая функция. 

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

Поэтому, когда функция запускается, блок уведомлений должен скользить сверху вниз, показывать свое сообщение и после 3secs slideUp снова.

Есть идеи, почему только slideUp отлично работает как анимация, а slideDown без анимации?

Ответы [ 4 ]

1 голос
/ 26 июля 2011

Проблема в вашем CSS. Удалите объявление display:block в ваших классах success и warning, и оно будет работать.

0 голосов
/ 26 июля 2011

Я попробовал вам код. Я добавил две кнопки для вызова функции уведомлений BoxOutput. 

<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 секунд.

Для решения этой проблемы добавьте этот код перед проверкой введите в messagesBoxOutput () 

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

Также посетите http://jqueryfordesigners.com/slidedown-animation-jump-revisited/. В JQuery есть ошибка. Эта ссылка может вам помочь.

0 голосов
/ 26 июля 2011

Это должно работать как есть, как только вы удалите display:block из классов .success и .warning, и дайте jquery обработать это ..

Пример на http://jsfiddle.net/gaby/Qznrk/3/
( изменил код, чтобы сохранить ссылку на уведомление и использовать его, а также связал вместе несколько методов .. )

0 голосов
/ 26 июля 2011

Попробуйте заменить последнюю строку вашего jquery этим ... 

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