javascript - 使用 jQuery 紧接着 ScrollTop 调整高度非常生涩/断断续续

Question

我正在尝试创建一个包含一堆 block 的页面(通常包含可以通过单击框展开的“溢出:隐藏”文本)。但是，当我单击该框以调整其高度(以显示所有文本)时，我还想通过使用 ScrollTop 使该框成为焦点。如果您单击该框以扩大其高度，如果它在浏览器窗口中不可见，这看起来很奇怪。

我有一个 jQuery 函数，可以很好地为高度变化设置动画并为 ScrollTop 重新定位设置动画，但对我来说它通常看起来很不稳定。这是不一致的。有时它非常流畅，有时它会调整框的高度然后非常突然地滚动，这会产生非常不愉快的不稳定效果。添加到奇怪的行为是，我无法在函数完成后几秒钟内使用鼠标手动滚动窗口。就好像它在阻止手动鼠标滚动。

我创建了一个小 jsfiddle(没有我通常会放在右侧框中的文本)。

jsfiddle

$(document).ready(function() {
  $(".right").click(function() {
      var currentHeight = $(this).height();
      $(this).animate({
      height: (currentHeight == 100 ? 200 : 100)
      }, 400, function() {
      var offset = $(this).offset();
      $('html, body').animate({
          scrollTop: offset.top
      }, 1000);
      });
  });
});

Answer 1

也许我误会你了，但是你设置它的方式，高度会改变，然后完成后，它会移动滚动位置，甚至以更慢的速度移动。

难道你不想同时和快速地做这些，而不是按顺序做吗？

$(".right").click(function () {

    var currentHeight = $(this).height();
    $(this).animate({
        height: (currentHeight == 100 ? 200 : 100)
    }, 400);

    var offset = $(this).offset();
    $('html, body').animate({
        scrollTop: offset.top
    }, 400);

});

演示:http://jsfiddle.net/NpdDN/

此外，这实际上会在动画期间“阻止”鼠标滚动，因为它会不断设置绝对滚动位置，覆盖鼠标所做的任何操作。