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

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

2 голосов
/ 09 ноября 2011

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

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 рыка после ее отображения, но она не очень чистая (тонны сложения и вычитания из смещения элементов)

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

Ответы [ 2 ]

1 голос
/ 09 ноября 2011

Я знаю, что это не дает точного ответа на заданный вопрос, но я предлагаю использовать 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 });
0 голосов
/ 09 ноября 2011 
    $(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");
    }
...