Блог

Главная - Вопросы по программированию - Плавная прокрутка jQuery при отображении элемента

Плавная прокрутка jQuery при отображении элемента

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть простая функция прокрутки jQuery, которая прокручивается до div при нажатии на элемент.

Проблема, с которой я сталкиваюсь, заключается в том, что, поскольку функция одновременно отображает элемент, а затем прокручивает его, прокрутка не является плавной, потому что одновременно с отображением div начинается прокрутка

Могу ли я каким-либо образом задержать анимацию, чтобы можно было загрузить div #wrapper, а затем анимация могла прокручиваться? Или что-то в этом роде, чтобы прокрутка была плавной

Вот функция jQuery:

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

Комментарии:

1. И то, что загружается в #wrapper div, из опубликованного кода должно отображаться немедленно, поэтому вы должны объяснить нам, почему это не так.

2. Он просто отображает #wrapper div, который содержит элементы img и элементы p, но поскольку он отображается одновременно с началом прокрутки, прокрутка не является плавной

3. Возможно, вам следует предварительно загрузить изображения

4. Разве я не могу просто немного отложить прокрутку, чтобы можно было отобразить div? Div #wrapper уже загружен в DOM, но у него просто есть свойство css display:none

5. Если он уже загружен, он должен появиться немедленно, задержки не должно быть почти никакой.

Ответ №1:

Вы можете предварительно загрузить изображения, чтобы они уже загружались, когда кто-то нажимает, и #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');
  });
});

Ответ №2:

Попробуйте использовать delay() для анимации.

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

Ответ №3:

Попробуйте использовать .fadeIn() вместо .show() с обратным вызовом. Смотрите ниже:

    $(document).ready(function() {

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

   });