jQuery 패널 자동 패널 스왑

Question

클릭 한 탐색 항목을 기반으로 콘텐츠 패널을 교체하는 기능을 구축 중입니다.

코드

$('.p-nav-nav').on('click', function(e){ 
    var $this = $(this); 
    var $which = $this.attr('data-rel'); 
    var $panel = $('.' + $which); 
    $('.p-nav-nav').removeClass('active'); 
    $this.addClass('active'); 
    $('.panel-1, .panel-2, .panel-3').fadeOut('fast', 'easeInOutQuad', function(){ 
     setTimeout(function(){ 
      $panel.fadeIn('fast', 'easeInOutQuad'); 
     }, 100); 
    }); 
}); 

어떻게이 자동적으로 실행 얻을 수 초 스위치 패널마다 X 번호라고? 나는 jQuery 1.7을 사용하고있다. (작업 할 수있는 것이기 때문에 업그레이드 할 수 없다.)

Answer 1

필자의 애니메이션 로직과 이벤트 로직을 분리했다. 이것은 당신이 항상 클릭 이벤트에 의존하지 않고 애니메이션 논리를 활성화 할 수 있다는 것을 조금 간단하게 유지되므로이 같은 :

이런 식으로

var animatePanel = function(panelName,nextPanel){ 
    // animation logic here 
}; 

$('.p-nav-nav').on('click', function(e) { 
    var $this = $(this); 
    var $which = $this.attr('data-rel'); 
    var $panel = $('.' + $which); 
    animatePanel($this,$panel); 
}; 

var looper = window.setTimeout(function(){ 
    // logic to get the current panel, and set the next panel, called via animatePanel() 
},1000); 

, 당신이 가질 수있는 클릭은 애니메이션을 활성화하지만, 자동 애니메이트하는 외부 타이머가 있어야합니다. 루퍼 시간 초과를 재설정하는 클릭 기능이나 타이머를 일시 중지하는 마우스 오버 기능을 넣으려고 할 수 있습니다.하지만 플러그인을 사용하지 않으려 고하기 때문에 주변에서 놀고 시도해야 할 모든 물건입니다. 당신이 너 자신을 위해 이것의 일부를 배우고 싶어하는 것처럼 들린다. 희망적으로 이것은 올바른 방향으로 몇 가지 아이디어를 일으킨다.