Возобновление интервала после остановки
Здравствуйте.
Есть на странице листалка блоков с интервалом и по клику на кнопки. Было желание, чтобы автопролистывание останавливалось при наведении, и когда блок уходит из области видимости. Это удалось реализовать. А вот что не получилось - так это сделать, чтобы автопролистывание автоматически возобновлялось при возвращении блока в область видимости. Вот собственно сайт - http://labm.format23.ru, и речь идёт о самом верхнем блоке с большими фоновыми изображениями. Вот код var interval, timer = 7300; function startInterval() { interval = setInterval(function(){ animate_bar(); var act_id = parseInt($('.sidebar .paginator div.act_pagi').attr('id').replace(/\D+/g,"")); var pagi = $('#sb_paginator div').length; if (act_id < pagi) {act_id++} else {act_id = 1}; pagination(act_id); },timer); }; function animate_bar() {$('.progress_bar span').animate({width: "100%"},timer, function(){$(this).css("width", "0px");});}; function stopInterval() {clearInterval(interval); $('.progress_bar span').stop().css('width', '0px');} function paginator() { $('.sidebar .paginator div').click(function(){ if(!$(this).hasClass('act_pagi')) { var act_id = parseInt($(this).attr('id').replace(/\D+/g,"")); pagination(act_id); } }); $('.sidebar').mouseenter(function(){stopInterval();}); // остановка автоматического перелистывания при наведении мышки $('.sidebar').mouseleave(function(){startInterval();animate_bar();}); // запуск автоматического перелистывания когда наведения мышки нет } function pagination(act_id) { $('.sidebar .paginator div').removeClass('act_pagi'); $('.sidebar .paginator div#sb_p'+act_id).addClass('act_pagi'); $('.sb_content').removeClass('show'); $('.sb_content#sb'+act_id).addClass('show'); $('.section1 .back').removeClass('show'); $('.section1 .back#back'+act_id).addClass('show'); }; Вот собственно запуск $(document).ready(function() { //Sidebar pagination if ($('div').is('.sidebar')) { paginator(); animate_bar(); startInterval(); } }); Функция viewport() function viewport(elem) { var win_h = window.innerHeight, scrol = $(document).scrollTop(), elem_h = elem.height(), elem_t = elem.offset().top; if (scrol+win_h >= elem_t && scrol <= elem_t+elem_h) {return ("visible");} else {return ("no");} } Реакция на viewport() $(document).on('scroll', function () { if ($('div').is('.sidebar')) {if (viewport($('.section1')) != 'visible') {stopInterval();}} }); Вот так работает всё: - при загрузке страницы запускается автопролистывание; - работает нажатие по кнопкам; - автопролистывание останавливается при наведении на сайдбар; - останавливается, когда блок уходит из области видимости при скролле. - запускается снова когда мышка уходит с сайдбара. Но при возвращении блока в область видимости автопролистывание снова не запускается. Потому что, если я пишу вот так: $(document).on('scroll', function () { if ($('div').is('.sidebar')) { if (viewport($('.section1')) != 'visible') {stopInterval();} else {startInterval();} } }); Получается какая-то фигня неописуемая. Что я делаю не так? P.S. И ещё заметил, что если страница какое-то время открыта в фоне (в соседней вкладке), то вся эта конструкция начинает как-то странно работать: анимированная полоска начинает жить своей жизнью, и не реагирует на наведения мыши на сайдбар. Точнее она как ms останавливается на секунду, а потом прёт дальше, хотя должна обнуляться и начинать свой путь сначала. Вот тут я вообще не понимаю что происходит. |
imhateb,
$(document).on('scroll', function () { if ($('div').is('.sidebar')) { stopInterval(); if (viewport($('.section1')) == 'visible') startInterval(); } }); |
Цитата:
Останавливаться останавливается, но так и не запускается при возвращении в область видимости. |
Цитата:
Ошибка была в написании самой функции. Надо было сделать вот так: function paginator() { $('.sidebar .paginator div').click(function(){ if(!$(this).hasClass('act_pagi')) { var act_id = parseInt($(this).attr('id').replace(/\D+/g,"")); pagination(act_id); } }); $('.sidebar').mouseenter(function(){stopInterval();}); // остановка автоматического перелистывания при наведении мышки $('.sidebar').mouseleave(function(){startInterval();animate_bar();}); // запуск автоматического перелистывания когда наведения мышки нет animate_bar(); startInterval(); } var interval, timer = 7300; function startInterval() { interval = setInterval(function(){ animate_bar(); var act_id = parseInt($('.sidebar .paginator div.act_pagi').attr('id').replace(/\D+/g,"")); var pagi = $('#sb_paginator div').length; if (act_id < pagi) {act_id++} else {act_id = 1}; pagination(act_id); },timer); }; function pagination(act_id) { $('.sidebar .paginator div').removeClass('act_pagi'); $('.sidebar .paginator div#sb_p'+act_id).addClass('act_pagi'); $('.sb_content').removeClass('show'); $('.sb_content#sb'+act_id).addClass('show'); $('.section1 .back').removeClass('show'); $('.section1 .back#back'+act_id).addClass('show'); }; function stopInterval() {clearInterval(interval); $('.progress_bar span').stop().css('width', '0px');} function animate_bar() {$('.progress_bar span').animate({width: "100%"},timer, function(){$(this).css("width", "0px");});}; И запускать только paginator() $(document).ready(function() { if ($('div').is('.sidebar')) {paginator();} }); $(document).on('scroll', function () { if ($('div').is('.sidebar')) {stopInterval(); if (viewport($('.section1')) == 'visible') paginator();} }); Всем спасибо за помощь )) |
Часовой пояс GMT +3, время: 12:30. |