动画滚动/显示隐藏元素使用jQuery

Animated scroll / show hidden element using jQuery

本文关键字：jQuery 元素 隐藏 滚动 显示 动画      更新时间：2023-09-26

有几个类似的问题，我尝试了所有的建议，但都无济于事。

有一个文本区和一个按钮。按钮最初是隐藏的，但是当用户输入任何内容时，按钮就会显示出来。

除此之外，我想滚动页面，使按钮变得可见。例子:

$(document).ready(function () {
    $('#AddCommentEntryBox').on('keyup', function (e) {
        if ($(this).val() !== '') {
            $('#AddCommentButton').show();
            $(window).scrollTop($('#AddCommentButton').position().bottom);
            //$("html, body").animate({ scrollTop: $(document).height() }, 1000);
        } else {
            $('#AddCommentButton').hide();
        }
    });
});
http://jsfiddle.net/sJQcM/

编辑:更好的例子-我需要滚动父元素，而不是页面: http://jsfiddle.net/sJQcM/3/

$(document).ready(function () {
    $('#AddCommentEntryBox').on('keyup', function (e) {
        if ($(this).val() !== '') {
            $('#AddCommentButton').show();
            $('html, body').stop().animate({scrollTop:$('#AddCommentButton').offset().top})
        } else {
            $('#AddCommentButton').hide();
        }
    });
});

小提琴

你可能想要排除退格。

你的例子可能也起作用了，它没有起作用的原因是因为.position()只给出了.top或.left。底部没有给出(你必须自己计算)。

您也可以使用.animate()与scrollTop平滑滚动。此外，我建议您等待用户在滚动之前停止输入几秒钟，否则它将向下滚动，textarea将仅部分可见。

相关文章：