Jquery анимации работают противоречиво - PullRequest
Новая
       42

Jquery анимации работают противоречиво

0 голосов
/ 19 октября 2018

Я работаю над простым игровым проектом и играю с jQuery для создания анимации.

По какой-то причине плавность и последовательность анимаций соотносятся с тем, насколько «активна» веб-страница.Если я удерживаю мышь на веб-странице в режиме ожидания, анимация прерывистая, не отвечает, а вторая анимация часто не воспроизводится.

Кроме того, если мышь на странице остается очень активной, анимация воспроизводится довольно

Вот небольшой видеоальбом с эффектом, который я вижу

https://imgur.com/a/K1bW308

Следующий код - это то, что я использую для анимации div: 

window.setTimeout(function() {
    $("#blue_button").animate({"margin-left" : "100px"}, 5000, 'easeOutElastic', function() {
        // enable mouse events
        $("#blue_button").css({"pointer-events" : "all"});
        // bring in the text desription
        var rect = $("#blue_button")[0].getBoundingClientRect();
        $("#text_div").animate({"margin-left" : rect.right + 80 + "px"}, 700, 'easeOutQuint');
    });
}, 6000);

Я использую jQuery 3.3.1 и jQuery Easing 1.3 (плагин с пользовательскими функциями замедления)

Я все еще вижу проблемы с воспроизведением при использовании jQuery замедления по умолчанию.

Я использую Chrome 69.0.3497.100 в Windows 10. Я вижу то же поведение при использовании ванильного Microsoft Edge.Также при использовании моего ноутбука с тем же Chrome / Windows.

Спасибо

Редактировать:

Я обошел это, используя расширение jquery для перехода.Работает довольно хорошо.

http://ricostacruz.com/jquery.transit/

...