Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Задержка (ненужная) в анимации (https://javascript.ru/forum/jquery/70376-zaderzhka-nenuzhnaya-v-animacii.html)

neformatnoe 31.08.2017 23:11

Задержка (ненужная) в анимации
 
Доброе время суток.
Не могу победить анимацию.
есть четыре контейнера (главное меню, два подменю, хлебные крошки)
надо настроить их анимацию по ходу скроллинга.
Когда "хлебных крошек не было - использовал 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 01.09.2017 13:38

https://api.jquery.com/stop/

neformatnoe 01.09.2017 15:12

Nexus, а не могли бы помочь примером в моём коде?
Там английский и не очень понятно при гуглотранслейте

Nexus 01.09.2017 15:29

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;
});

neformatnoe 01.09.2017 19:26

Nexus, большое спасибо))) по тому мануалу я бы такую конструкцию сам точно не составил.
пафгрей скакать перестал, но отключилась анимация #first_menu
ни в какую возвращаться не хочет при скролле вверх.
Причём при ховере возвращается на место, а при скроллинге нет. Хотя в обоих случаях указан slideDown

neformatnoe 02.09.2017 10:56

Сейчас вот такая конструкция:
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, в чём может быть затыка?

Nexus 04.09.2017 13:11

neformatnoe, в строке 20 ошибка, должно быть так:
lastScrollTop=curSTop;


Часовой пояс GMT +3, время: 04:09.