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

Live example

它基本上把新的'咆哮'放在现有的上面，问题是，当旧的'咆哮'消失时，新的'咆哮'突然崩溃，如果你正在阅读消息，那就非常烦人。

我正在考虑在显示之后使新的咆哮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");
    }

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

2 个答案: