显示元素

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