Как прикрепить элемент на странице (позиция: фиксированная) после того, как он был отображен?

Question

Я разрабатываю уведомления, похожие на рычание, для своего сайта, в настоящее время это выглядит так:

HTML:

<div id="growls"></div>

CSS:

#growls {
position: fixed;
right: 20px;
bottom: 20px;
}

.growl {
display: none;
}

JS:

function growl(message) {
    if (growls < 5) {
        growls = growls + 1;
        $('<div class="growl short block">' + message + '</div>').prependTo('#growls').fadeIn('slow').delay(2000).fadeOut('slow', function() { growls = growls - 1 });
        }
    }

Живой пример

Это в основном помещает новый "рычание" поверх существующих, проблема в том, что когда старые исчезают, новые "рыки" внезапно рушатся, что очень раздражает, если вы читаете сообщение.

Я подумываю о том, чтобы сделать новую позицию div рычания фиксированной после ее отображения, но она не очень чистая (тонны сложения и вычитания из смещения элементов)

Есть ли лучший способ сделать это?

Answer 1

Я знаю, что это не отвечает на точный вопрос, но мое предложение будет использовать slideUp скрыть элементы вместо fadeOut, Это даст хорошее плавное движение для других элементов, чтобы переместиться в их новую позицию. Это может быть легко отслежено читателями и не заставит элементы прыгать.

Или для еще более приятного взгляда используйте animate и анимация высоты и непрозрачности:

http://jsbin.com/exonal/4

$('<div class="growl short block">' + message + '</div>').prependTo('#growls')
    .fadeIn('slow').delay(2000)
    .animate({opacity: 0, height:"hide"},'slow', function() { growls = growls - 1 });

Answer 2

    $(document).ready(function(){
    // what is your jQuery version? this only works in 1.7+ otherwise use .delegate()
// register a hide show command for every .growl from page load and into the future.
       $("#growl").on("growlHideShow",".growl",{delayTime:2000}, function(event){
//slideToggle and fadeToggle are great.  change your display effect here with whatever you decide.
         $(this).slideToggle('slow');
         if($(this).is(":visible")){
//hide it after the 'delaytime' has passed.
           $(this).delay(event.data.delayTime).triggerHandler("growlHideShow");
         }
       });
    });

    function growl(message) {
    var growlDiv = $("#growl");
    var growlsList = $(".growls", growlDiv );
    var html = '<div class="growl short block">'+message+'</div>';
    if(growlsList.length >= 5){
    //you seemed to want to keep the growl count to 5. this removes the last one.
      $(growlsList[growlsList.length -1]).remove();
    }
      growlDiv.prepend(html);
      $(":first", growlDiv).triggerHandler("growlHideShow");
    }