Я написал кучу jQuery, чтобы помочь моему другу с его онлайн-портфолио, которое можно найти здесь: http://bradleyrogerson.com/ (для справки о том, что я собираюсь описать).
Вот также прямая ссылка на javascript: http://bradleyrogerson.com/static/js/actions-take2.js
Это довольно длинный файл, поэтому, вероятно, лучше, если я не помещу все это в блок кода в переполнении стека напрямую.
Сама проблема довольно проста, и вы можете легко увидеть неработающую анимацию на сайте (ссылка выше).По сути, моя hideProject() функция, которая в основном скрывает проект, а затем снова отображает общий обзор всех его проектов, запускается 4 раза по причине, которую я просто не могу найти.
Ключевая проблема с этим заключается в том, что вКогда выполняется последний обратный вызов анимации, я анимирую свойство scrollLeft элемента body & html, чтобы оно визуально скользило назад к тому месту, на котором вы остановились, прежде чем перейти к представлению «more info».
Поскольку анимация запускается 4 раза, имеется окно длительностью около 1,2 секунды, в течение которого анимируется видовой экран, что фактически лишает возможности прокрутки вправо в течение этого времени.
Это можно легко воспроизвести с помощьюзайдя на его сайт прямо сейчас и нажав на изображение, расположенное дальше всего вправо (горизонтальная прокрутка страницы), затем, как только вы просмотрели проект, просто нажмите на одно из изображений, чтобы вызвать функцию hideProject() икак только область просмотра анимирована настолько, насколько это возможно, попробуйте сразу прокрутить влево.
Вы заметите, что с анимацией, которая все еще работает, вы не сможете толкать, пытаясь выйти из окна, заставляя значение scrollLeft снова и снова (4 раза).
Я прокомментировал файл javascript очень хорошо (по крайней мере, я так думаю), поэтому его должно быть довольно легко читать и понимать после открытия.
Я был бы очень признателен за ответк вопросу, как это исправить, но, самое главное, несколько советов о том, почему он вообще сломался, чтобы я мог извлечь из этого урок и больше не повторять эту ошибку.
Большое спасибо за чтение.
Jannis
Примечание: рассматриваемая функция (по крайней мере, я думаю, что это причина) включена line 212 в этот файл .