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

这适用于只占用一行的文本，但是当它占用 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 回答