Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.08.2017, 23:11
Интересующийся
Отправить личное сообщение для neformatnoe Посмотреть профиль Найти все сообщения от neformatnoe
 
Регистрация: 05.04.2015
Сообщений: 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

Наблюдаем за "хлебными крошками" при скролле!!! Тыкаем смело в пункты главного меню, после них начинается бесовство)))

Ну и расскажу логику как должно быть.
При клике в главном меню, меняются подменю(одно уехало второе выехало), при скроллинге вниз все менюшки сворачиваются - хлебные крошки прижимаются к шапке, при скроллинге вверх выезжает главное меню и крошки сдвигаются под них. При наведении мыша на логотип, выезжает главное, соответственно крошки сдвигаются под него.


Но вот крошки эти ведут себя очень странно...

Подскажите люди добрые, что делаю не так???

Последний раз редактировалось neformatnoe, 31.08.2017 в 23:16.
Ответить с цитированием
  #2 (permalink)  
Старый 01.09.2017, 13:38
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

https://api.jquery.com/stop/
Ответить с цитированием
  #3 (permalink)  
Старый 01.09.2017, 15:12
Интересующийся
Отправить личное сообщение для neformatnoe Посмотреть профиль Найти все сообщения от neformatnoe
 
Регистрация: 05.04.2015
Сообщений: 11

Nexus, а не могли бы помочь примером в моём коде?
Там английский и не очень понятно при гуглотранслейте
Ответить с цитированием
  #4 (permalink)  
Старый 01.09.2017, 15:29
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

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, 04.09.2017 в 13:11. Причина: Bugfix, line 20;
Ответить с цитированием
  #5 (permalink)  
Старый 01.09.2017, 19:26
Интересующийся
Отправить личное сообщение для neformatnoe Посмотреть профиль Найти все сообщения от neformatnoe
 
Регистрация: 05.04.2015
Сообщений: 11

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

Последний раз редактировалось neformatnoe, 01.09.2017 в 19:32. Причина: дополнил
Ответить с цитированием
  #6 (permalink)  
Старый 02.09.2017, 10:56
Интересующийся
Отправить личное сообщение для neformatnoe Посмотреть профиль Найти все сообщения от neformatnoe
 
Регистрация: 05.04.2015
Сообщений: 11

Сейчас вот такая конструкция:
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, в чём может быть затыка?
Ответить с цитированием
  #7 (permalink)  
Старый 04.09.2017, 13:11
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
.each() для анимации Black_Star jQuery 2 21.12.2016 10:23
Поимать окончание анимации и вывести картинку. karssen Элементы интерфейса 2 10.12.2015 16:20
Помогите убрать полосу прокрутки при анимации контента Lifemaster Элементы интерфейса 6 31.07.2015 02:59
Начало анимации с места предыдущей анимации FanAizu (X)HTML/CSS 3 21.03.2014 12:39
Задержка перед показом анимации Gorini4 Элементы интерфейса 3 05.09.2011 02:37