Я новичок в jQuery и прошу прощения, если у моей проблемы есть очевидный ответ. Я исследовал разные способы решения этой ситуации, но все сталкиваются с одной и той же проблемой.
У меня есть несколько веб-страниц, которые связаны между собой, и я использую jQuery для анимации строки меню на каждой странице одинаково.
Страница загружается с полностью видимой строкой меню, а затем прокручивается вниз, так что видна только ее часть (я добился этого с помощью анимации нижнего значения jQuery css). Когда пользователь наводит курсор на панель, он возвращается в исходное положение (под нагрузкой), поэтому содержимое снова становится видимым.
Проблема в том, что у меня есть код jQuery в документе. Готов последовательно перемещать панель вниз, а затем при наведении перемещать содержимое вверх - , поэтому при нажатии на ссылку и новой странице при загрузке строка меню немного увеличивается (из-за наличия мыши на панели и на новой странице) вместо того, чтобы сначала полностью опуститься.
Мне нужна функциональность, при которой на каждой странице полоса перемещается вниз, поэтому она частично видна, а затем снова перемещается вверх при последующем взаимодействии.
Вот код, который я использовал, и я хотел бы помочь с его разбивкой или вставкой логики if-else, основанной на свойстве div css bottom, или чего-то такого, чтобы препятствовать тому, чтобы бар сначала двигался вверх, а затем двигался вниз который выполняет вторую часть кода jQuery перед первой частью).
$('#navigation').stop().animate({bottom: '-50px'}, 1500);
$('#navigation').mouseenter(function() {
$('#wrapper').stop().delay(300).animate({bottom: '3em'}, 500);
});
$('#navigation').mouseleave(function() {
$('#wrapper').stop().delay(300).animate({bottom: '0'}, 500);
});