[imhateb]

Здравствуйте.

Есть на странице листалка блоков с интервалом и по клику на кнопки. Было желание, чтобы автопролистывание останавливалось при наведении, и когда блок уходит из области видимости. Это удалось реализовать. А вот что не получилось - так это сделать, чтобы автопролистывание автоматически возобновлялось при возвращении блока в область видимости.

Вот собственно сайт - 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 останавливается на секунду, а потом прёт дальше, хотя должна обнуляться и начинать свой путь сначала.
Вот тут я вообще не понимаю что происходит.