Спасибо за публикацию визуальной информации о том, что вы пытались сделать
Я думаю, что в этом случае было бы намного проще, если бы вы использовали абсолютное позиционирование, чтобы была только одна переменная (верхняя координата)это требует манипуляций, и вам не нужно выполнять функции изменения размера, AP (абсолютное позиционирование) позаботится об этом тоже.
Суть в том, что вам нужны и div, и bar, и контейнер для видео, чтобы анимироватьв то же время, и когда они анимируются, вам также нужно, чтобы размер встроенного объекта изменялся с той же скоростью. Я обнаружил, что было слишком много вычислений, и даже тогда я не мог заставить объект изменить размер вместе с его родителем.на любой скорости ... так что я подумал, что проще сделать CSS как mych, а затем просто использовать jQuery для перемещения позиции
Главное - убедиться, что верхний бар #stream-bar-hover всегдатакой же высоты .. так что не надевайте прокладки и т. д. на нем, у вас уже есть #stream-bar внутри, так что любые украшения можно поместить туда
Я продолжалисходя из того, что это верхнее левое изображение было 38x38 в соответствии с вашим HTML, но вы можете вычислить следующий бит по-другому, если хотите, чтобы он был меньше, к тому времени, когда я добавил границу 1px, отступы 2px и поле 2px в #stream-bar, что означаловысота панели парения должна была составлять 48 пикселей (я добавил переполнение: скрыто на всякий случай;))
Тогда абсолютно позиционируйте #stream-bar-hover и #stream-popup, чтобы они оба заполняли различные части экранапоэтому top: 0; для столбца и top: 48px; для видеоконтейнера, правая левая и нижняя координаты этих двух элементов div никогда не должны изменяться путем изменения только верхнего значения, с которым должны работать ваши отложенные функции и функции наведения, вам просто нужночтобы анимировать координаты двух вершин div в одно и то же время
преимущество этого метода в том, что ему не нужна функция window.resize (), которую, я думаю, ваш метод будет
Вот рабочаяпример: ссылка с скрипкой для кода: здесь