2

私は自分のサイトの通知のようなうなり声を開発しています。現在、次のようになっています。

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の位置を固定することを考えていますが、あまりきれいではありません(要素オフセットからの大量の追加と削除)

これを行うより良い方法はありますか？

4

2 に答える 2

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 });
于 2011-11-09T15:00:25.770 に答える
0 
    $(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");
    }
于 2011-11-09T15:34:09.850 に答える