0

私はチャットシステムを構築しており、div「サーバー出力」に追加するときにテキストをアニメーション化しようとしていますが、アニメーションが見えるようにdivを下にスクロールしたままにしています。

function output(name, msg, flt, clss){
    var string = ' \
        <div class="'+flt+'">'+name+':</div> \
        <div class="'+clss+'"> '+msg+'</div> \
    ';
    $(string).appendTo('.server-output').hide();
    $(".server-output").scrollTop($(".server-output")[0].scrollHeight); // Scrolls to bottom of div
    $('.'+ clss + ':last, .'+flt+':last').show('fast');
}

これは、テキストが 1 行しかない場合は問題なく機能しますが、2 行以上を占める場合、スクロール イベントは十分に下にスクロールしません。

構造を維持しながら要素を非表示にする方法はありますか (見えないものなど)。

また

これを行うためのより良い方法はありますか？現在のコーディング方法では、ほとんどニワトリが先か卵が先かの問題です。要素が存在するまでスクロールすることはできませんが、要素のアニメーションを表示するには、要素の下にスクロールする必要があります。

前もって感謝します！

4

2 に答える 2

2

これを試して...

function output(name, msg, flt, clss){
    var string = ' \
        <div class="'+flt+'">'+name+':</div> \
        <div class="'+clss+'"> '+msg+'</div> \
    ';
    $(string).appendTo('.server-output').css("opacity", 0);
    $(".server-output").scrollTop($(".server-output")[0].scrollHeight); // Scrolls to bottom of div
    $('.'+ clss + ':last, .'+flt+':last').animate({ opacity: 1 }, 500);
}

不透明度とフェードを使用して新しいテキストを遷移させます。これにより、非表示にして後で表示するときの間隔の問題が解決されるはずです。

また、単なる提案ですが、後でjQuery解析を行うのではなく、追加された要素をローカル変数としてキャッシュし、それを介して参照することができます...

function output(name, msg, flt, clss){
    var string = ' \
        <div class="'+flt+'">'+name+':</div> \
        <div class="'+clss+'"> '+msg+'</div> \
    ';
    var $string = $(string).appendTo('.server-output');
    $string.css("opacity", 0);
    $(".server-output").scrollTop($(".server-output")[0].scrollHeight); // Scrolls to bottom of div
    $string.animate({ opacity: 1 }, 500);
}
于 2013-10-11T13:29:14.250 に答える
0

要素を非表示にしているため.server-output、jQuery はそのサイズを正しく計算できず、誤った位置にスクロールします。

あなたが試すことができるのは.css('visibility', 'hidden')、要素を適用してから.css('visibility', 'visible')もう一度表示することです。scrollTopこれで位置が正しく計算されるはずです。

function output(name, msg, flt, clss){
    var string = ' \
        <div class="'+flt+'">'+name+':</div> \
        <div class="'+clss+'"> '+msg+'</div> \
    ';
    $(string).appendTo('.server-output').css('visibility' 'hidden');
    $(".server-output").scrollTop($(".server-output")[0].scrollHeight); // Scrolls to bottom of div
    $('.'+ clss + ':last, .'+flt+':last').css('visibility' 'visible');
}
于 2013-10-11T13:28:52.217 に答える