Странное поведение на jQuery animate - PullRequest
Новая
       40

Странное поведение на jQuery animate

0 голосов
/ 07 октября 2019

Я пытаюсь заставить некоторые изображения предварительного просмотра веб-сайта работать. Суть в том, что у вас есть большое изображение слева и несколько маленьких изображений справа. Когда вы щелкаете одно из изображений справа, оно перемещается в левое изображение и автоматически прокручивает «веб-страницу».

Это мой код в двух версиях: 

const layoutTarget = document.querySelector('#target');

const scrollImg = () =>{

    const topHeight = (layoutTarget.firstChild.height-layoutTarget.clientHeight);
    const scrollSpeed = (layoutTarget.firstChild.height/layoutTarget.clientHeight)*1000;

    $('#target img').animate({
        top: '-' + topHeight + 'px'
    }, {duration: scrollSpeed});
}

$('.container .gallery .item img').mousedown(()=>{

    const topHeight = (layoutTarget.firstChild.height-layoutTarget.clientHeight);
    const scrollSpeed = (layoutTarget.firstChild.height/layoutTarget.clientHeight)*1000;

    $('#target img').animate({
        top: '-' + topHeight + 'px'
    }, {duration: scrollSpeed});
});

Когда я загружаю страницу и вызываю функцию scrollImg в консоли, единственной проблемой, с которой я сталкиваюсь, является «пауза», примерно равная переменной «scrollSpeed».

Когда я щелкаю изображение и запускаюсобытие mousedown, изображение продолжает прокручиваться, пока я удерживаю мышь. И «пауза» все еще там.

Есть ли событие, которое я мог бы использовать вместо mousedown, или какая-то директива, чтобы он завершился после mousedown? И как мне избавиться от паузы?

EDIT: Gif, чтобы показать время между вызовом функции и фактической прокруткой. Screencast

Заранее спасибо, ЧЧ

Редактировать снова;Мы добавили таймаут к функции, и она сработала.

...