Задержка (ненужная) в анимации
Доброе время суток.
Не могу победить анимацию. есть четыре контейнера (главное меню, два подменю, хлебные крошки) надо настроить их анимацию по ходу скроллинга. Когда "хлебных крошек не было - использовал slideDown и slideUp, вполне всё хорошо работало, но заказчик захотел приклеивать хлебные крошки под логотип и началась несусветица - первая итерация анимации проходит почти гладко, потом идёт задержка в 6 секунд, следующая в 20 секунд, потом ждать устал. Как победить эту беду? Вот собственно сам скрипт var lastScrollTop = 0; $(window).scroll(function(event){ var st = $(this).scrollTop(); if (st > lastScrollTop){ // код для прокрутки вниз $("#pathgray").animate({ top: "60px" }, 600 ); $("#yacht_block").slideUp(600); $("#com_block").slideUp(600); $('#first_menu').slideUp(600); } else { // код для прокрутки вверх $("#pathgray").animate({ top: "102px" }, 600 ); $('#first_menu').slideDown(600); } lastScrollTop = st; }); $(document).ready(function(){ $("#logo_header").hover(function(){ $("#first_menu").slideDown(600); $("#pathgray").animate({ top: "102px" }, 600 ); }), $(".company").click(function() { $("#yacht_block").slideUp(600); $("#com_block").slideDown(600); return false; }), $(".yacht").click(function() { $("#yacht_block").slideDown(600); $("#com_block").slideUp(600); return false; }); }); Вот адрес странички где это чудо висит: http://www.janmor-yachts.ru/yachts/janmor700.html Наблюдаем за "хлебными крошками" при скролле!!! Тыкаем смело в пункты главного меню, после них начинается бесовство))) Ну и расскажу логику как должно быть. При клике в главном меню, меняются подменю(одно уехало второе выехало), при скроллинге вниз все менюшки сворачиваются - хлебные крошки прижимаются к шапке, при скроллинге вверх выезжает главное меню и крошки сдвигаются под них. При наведении мыша на логотип, выезжает главное, соответственно крошки сдвигаются под него. Но вот крошки эти ведут себя очень странно... Подскажите люди добрые, что делаю не так??? :help: |
|
Nexus, а не могли бы помочь примером в моём коде?
Там английский и не очень понятно при гуглотранслейте |
neformatnoe, попробуйте так:
var lastScrollTop=$(window).scrollTop(); $(window).scroll(function(event){ var curSTop=$(this).scrollTop(), $node=$("#pathgray"); if (curSTop>lastScrollTop && parseInt($node.css('top'))>60){ // код для прокрутки вниз $node.stop(true).animate({ top:"60px" },600); $("#yacht_block,#com_block,#first_menu").slideUp(600); }else if(curSTop<lastScrollTop && parseInt($node.css('top'))<102){ // код для прокрутки вверх $node.stop(true).animate({ top:"102px" },600); $('#first_menu').slideDown(600); }; lastScrollTop=curSTop; }); |
Nexus, большое спасибо))) по тому мануалу я бы такую конструкцию сам точно не составил.
пафгрей скакать перестал, но отключилась анимация #first_menu ни в какую возвращаться не хочет при скролле вверх. Причём при ховере возвращается на место, а при скроллинге нет. Хотя в обоих случаях указан slideDown |
Сейчас вот такая конструкция:
var lastScrollTop=$(window).scrollTop(); $(window).scroll(function(event){ var curSTop=$(this).scrollTop(), $node=$("#pathgray"); if (curSTop>lastScrollTop && parseInt($node.css('top'))>60){ // код для прокрутки вниз $node.stop(true).animate({ top:"60px" },10); $("#yacht_block,#com_block,#first_menu").slideUp(10); }else if(curSTop<lastScrollTop && parseInt($node.css('top'))<92){ // код для прокрутки вверх $node.stop(true).animate({ top:"92px" },600); $('#first_menu').slideDown(600); }; lastScrollTop=curSTopst; }); $(document).ready(function(){ $("#logo_header").hover(function(){ $("#first_menu").slideDown(600); $("#pathgray").stop(true).animate({ top:"92px" },600); }), $(".company").click(function() { $("#yacht_block").slideUp(600); $("#com_block").slideDown(600); return false; }), $(".yacht").click(function() { $("#yacht_block").slideDown(600); $("#com_block").slideUp(600); return false; }); }); при событии ховер, главное меню возвращается на место, а при скролле нет. В обоих случаях использую slideDown, в чём может быть затыка? |
neformatnoe, в строке 20 ошибка, должно быть так:
lastScrollTop=curSTop; |
Часовой пояс GMT +3, время: 04:09. |