jquery - 显示后如何将元素粘贴在页面上（位置：固定）？

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