jQuery在显示元素时平滑滚动

Question

我有一个简单的jQuery滚动功能，可在单击元素时滚动到div。

我遇到的问题是，因为函数同时显示了一个元素然后滚动到该元素，所以滚动不平滑，因为在显示div的同时，滚动开始了

有什么方法可以延迟动画，以便#wrapper div可以加载，然后动画可以滚动？ 或沿着这些线的东西，以便滚动是平滑的

这是jQuery函数：

jQuery(document).ready(function($) {
    $('.divOne').click(function() {
    $('#wrapper').show();
    $('html,body').animate({scrollTop: $('.divTwo').offset().top}, 'slow');
    });
});

Answer 1

尝试对动画使用delay() 。

jQuery(document).ready(function($) {
    $('.divOne').click(function() {
    $('#wrapper').show();
    $('html,body').animate({scrollTop: $('.divTwo').offset().top}, 'slow').delay(2000);
    });
});

Answer 2

尝试使用.fadeIn()代替.show()进行回调。 见下文：

   $(document).ready(function() {

        $('.divOne').click(function(event) {
            $('#wrapper').fadeIn(150, function() {
                $('html,body').animate({scrollTop: $('.divTwo').offset().top}, 'slow');
            });
        });

   });

Answer 3

您可以预加载图像，因此当有人单击时它们已经被加载，并且带有图像的#wrapper元素将立即显示

jQuery(document).ready(function($) {
   $('#wrapper img').each(function() {
    var img = new Image();
    img.src = this.src;
   });

  $('.divOne').click(function() {
    $('#wrapper').show();
    $('html,body').animate({
      scrollTop: $('.divTwo').offset().top
    }, 'slow');
  });
});