Пользовательские JQuery CSS фон слайдер проблема с навигацией

Question

Я написал простой фон ползунок, который использует CSS фоновое изображение слайда и его можно посмотреть здесь: http://jsfiddle.net/yfRUs/

$(".project h2").click(function() { 
    if ($(this).parent().hasClass('opened')) { 
     $(".projectbgs").remove(); 
     var projectid = $(this).parent().data("projectid"); 
     var titlewidth = $(this).width(); 
     var titleholderwidth = $(this).parent().width(); 
     var titleposition = titleholderwidth - titlewidth; 
     $(this).css({left: 0}); 
     $(this).animate({'margin-right': 0}, 300); 
     $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''}); 
     $(".project").removeClass("opened"); 
    } 
    else { 
     $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''}); 
     $(".project").removeClass("opened"); 
     $(".projectbgs").remove(); 
     var projectid = $(this).parent().data("projectid"); 
     $(this).parent().addClass('opened', 500); 
     var titlewidth = $(this).width(); 
     var titleholderwidth = $(this).parent().width(); 
     var titleposition = titleholderwidth - titlewidth; 
     $(this).css({left: titleposition}); 
     $(this).animate({'margin-left': 0}, 300); 

     if (projectid === 1) { 
      $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs"> <ul class="bgimages"> <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg\');"> </li>  <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg\');"> </li> </ul> </div>')); 
     } 
     else if (projectid === 2) { 
      $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs"> <ul class="bgimages"> <li class="image" style="background-image: url(\'http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg\');"> </li> <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg\');"> </li> </ul> </div>')); 
     } 
     var viewportwidth = $(window).width(); 
     $('#projectbg-' + projectid + ' ul li').each(function(index) { 
      $(this).css({width: viewportwidth}); 
     }); 
     $(window).resize(function() { 
      $('#projectbg-' + projectid + ' ul li').each(function(index) { 
       $(this).css({width: viewportwidth}); 
      }) 
     }); 
     var triggers = $('#project-' + projectid + ' ul.triggers li'); 
     var images = $('ul.bgimages li'); 
     var lastElem = triggers.length - 1; 
     var mask = $('.projectbgs ul.bgimages'); 
     var imgWidth = images.width(); 
     var target; 
     triggers.first().addClass('active'); 
     mask.css('width', imgWidth * (lastElem + 1) + 'px'); 
     function sliderResponse(target) { 
      mask.stop(true, false).animate({'left': '-' + imgWidth * target + 'px'}, 1000); 
      triggers.removeClass('active').eq(target).addClass('active'); 
     } 
     triggers.click(function() { 
      if (!$(this).hasClass('active')) { 
       target = $(this).index(); 
       sliderResponse(target); 
       resetTiming(); 
      } 
     }); 
     function sliderTiming() { 
      target = $('ul.triggers li.active').index(); 
      target === lastElem ? target = 0 : target = target + 1; 
      sliderResponse(target); 
     } 
     var timingRun = setInterval(function() { 
      sliderTiming(); 
     }, 7000); 
     function resetTiming() { 
      clearInterval(timingRun); 
      timingRun = setInterval(function() { 
       sliderTiming(); 
      }, 7000); 
     } 
    } 
}); 

Чтобы увидеть «неизвестный вопрос» открыт сначала нажмите PROJECT (щелкните по названию) справа и щелкните эти два небольших прямоугольника, представляющих слайды (вам может потребоваться прокрутить окно jsfiddle, поскольку оно построено для разрешений с разрешением 1024+).

Затем откройте проект 2, а также прокрутите слайды, а теперь вернитесь к проекту 1 и попробуйте прокрутить - это не сработает!? Я действительно озадачен этим, так как NO ERROR выбрасывается?

У кого-нибудь есть идеи, что не так?

Answer 1

Проблема заключается в том, что события click не являются надлежащим образом несвязанными, и интервал не останавливается при переходе от одного проекта к другому. Для этого необходимо определить triggers и timingRun вне обработчика событий, и сбросить их каждый раз, когда вы входите в обработчик:

if(triggers){ 
    triggers.off('click'); 
    triggers = null; 
} 
if(timingRun){ 
    clearInterval(timingRun); 
    timingRun = null; 
} 

Полный кусок кода будет выглядеть как:

var triggers, 
timingRun; 

$(".project h2").click(function() { 
    if(triggers){ 
     triggers.off('click'); 
     triggers = null; 
    } 
    if(timingRun){ 
     clearInterval(timingRun); 
     timingRun = null; 
    } 
    if ($(this).parent().hasClass('opened')) { 
     $(".projectbgs").remove(); 
     var projectid = $(this).parent().data("projectid"); 
     var titlewidth = $(this).width(); 
     var titleholderwidth = $(this).parent().width(); 
     var titleposition = titleholderwidth - titlewidth; 
     $(this).css({left: 0}); 
     $(this).animate({'margin-right': 0}, 300); 
     $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''}); 
     $(".project").removeClass("opened"); 
    } 
    else { 
     $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''}); 
     $(".project").removeClass("opened"); 
     $(".projectbgs").remove(); 
     var projectid = $(this).parent().data("projectid"); 
     $(this).parent().addClass('opened', 500); 
     var titlewidth = $(this).width(); 
     var titleholderwidth = $(this).parent().width(); 
     var titleposition = titleholderwidth - titlewidth; 
     $(this).css({left: titleposition}); 
     $(this).animate({'margin-left': 0}, 300); 

     if (projectid === 1) { 
      $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs"> <ul class="bgimages"> <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg\');"> </li>  <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg\');"> </li> </ul> </div>')); 
     } 
     else if (projectid === 2) { 
      $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs"> <ul class="bgimages"> <li class="image" style="background-image: url(\'http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg\');"> </li> <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg\');"> </li> </ul> </div>')); 
     } 
     var viewportwidth = $(window).width(); 
     $('#projectbg-' + projectid + ' ul li').each(function(index) { 
      $(this).css({width: viewportwidth}); 
     }); 
     $(window).resize(function() { 
      $('#projectbg-' + projectid + ' ul li').each(function(index) { 
       $(this).css({width: viewportwidth}); 
      }) 
     }); 
     triggers = $('#project-' + projectid + ' ul.triggers li'); 
     var images = $('ul.bgimages li'); 
     var lastElem = triggers.length - 1; 
     var mask = $('.projectbgs ul.bgimages'); 
     var imgWidth = images.width(); 
     var target; 
     triggers.first().addClass('active'); 
     mask.css('width', imgWidth * (lastElem + 1) + 'px'); 
     function sliderResponse(target) { 
      mask.stop(true, false).animate({'left': '-' + imgWidth * target + 'px'}, 1000); 
      triggers.removeClass('active').eq(target).addClass('active'); 
     } 
     triggers.click(function() { 
      if (!$(this).hasClass('active')) { 
       target = $(this).index(); 
       sliderResponse(target); 
       resetTiming(); 
      } 
     }); 
     function sliderTiming() { 
      target = $('ul.triggers li.active').index(); 
      target === lastElem ? target = 0 : target = target + 1; 
      sliderResponse(target); 
     } 
     timingRun = setInterval(function() { 
      sliderTiming(); 
     }, 7000); 
     function resetTiming() { 
      clearInterval(timingRun); 
      timingRun = setInterval(function() { 
       sliderTiming(); 
      }, 7000); 
     } 
    } 
});