페이드 아웃/fadeIn 표시,하지만 당신은 이미 활성화 있다면, 당신은 내 jsfiddle을보고 난 후에 내 문제를 이해하게 될 것입니다

Question

아무것도하지) : http://jsfiddle.net/N_3G/L47h985u/

모든 것이 잘 실행을 제외하고 당신이 활성 엄지 손가락을 클릭하면 그, 페이드 아웃/fadeIn 과정이 시작됩니다 :(! ...

난 그냥 말하여이 기능을 수행 할 "현재의 엄지 손가락이 활성화되어 있으면 당신이 그것을 클릭하면, 아무것도하지 ..."

jQuery에서 초보자이며 최선을 다하고 있습니다.

독서를 가져 주셔서 감사합니다. Nicolas.

<div id="xmas-slides-wrapper"> 
<div id="xmas-slide"> 
    <div id="slide1-ban" class="slides"> 
     <img src="http://lorempixel.com/550/200/sports/1" /> 
    </div> 
    <div id="slide2-ban" class="slides active"> 
     <img src="http://lorempixel.com/550/200/sports/2" /> 
    </div> 
    <div id="slide3-ban" class="slides"> 
     <img src="http://lorempixel.com/550/200/sports/3" /> 
    </div> 
    <div id="slide4-ban" class="slides"> 
     <img src="http://lorempixel.com/550/200/sports/4" /> 
    </div>  
</div>  
<div id="thumb-select"> 
    <div class="thumb" id="slide1"> 
     <img src="http://lorempixel.com/100/100/sports/1" /> 
    </div> 
    <div class="thumb active" id="slide2"> 
     <img src="http://lorempixel.com/100/100/sports/2" /> 
    </div> 
    <div class="thumb" id="slide3"> 
     <img src="http://lorempixel.com/100/100/sports/3" /> 
    </div> 
    <div class="thumb" id="slide4"> 
     <img src="http://lorempixel.com/100/100/sports/4" /> 
    </div>  
</div> 
</div> 

그리고 JS : CSS의

$('.slides.active').show(); 

$('.thumb').each(function() { 
$(this).click(function() { 
    if ($(this).not('.active')) { 
     $('.thumb.active').removeClass('active'); 
     $(this).addClass('active');   
     var thumbActif = $(this).attr('id'); 
     $('.slides.active').fadeOut('slow');   
     $('.slides.active').removeClass('active'); 
     $('#' + thumbActif + '-ban').addClass('active'); 
     $('.slides.active').fadeIn('slow'); 
    } 
}); 
}); 

비트가 :

이

#xmas-slides-wrapper { 
position:relative; 
height:250px; 
width:550px; 
text-align:center; 
} 

#xmas-slide { 
margin-bottom:20px; 
height:200px; 
width:550px; 
overflow:hidden; 
position:relative; 
} 

#xmas-slide .slides { 
display:none; 
position:absolute; 
top:0; 
left:0; 
} 

#thumb-select .thumb { 
display:inline-block; 
margin:0 10px; 
} 

#thumb-select { 
position:absolute; 
bottom:0; 
left:0; 
text-align:center; 
width:100%; 
} 

Answer 1

당신은 hasClass

if (!$(this).hasClass('.active')) { 
    //not active 
} 

Answer 2

jQuery not를 사용해야은 사용하지 않는 논리적 아니다 s 제외 선출 된 요소를 선택하거나 일치하는 요소를 선택하지 마십시오 hasClass을 사용할 수 있지만 선택기로 조건을 확인해야하는 경우 (클래스 이름 일 필요는 없습니다. 첫 번째로 # ID 등) 당신이 코드 아래 .is("your selector")

수표를 사용하고 차이를 볼 수

if ($(this).hasClass('active')) { 

} 

또는

if ($(this).is('.active')) { 

} 

OR

if ($(this).is('.active:first')) { 

} 

Answer 3

고마워요! 이제 답은 두 가지를 조합하여 원하는 것처럼 작동합니다.

$('.slides.active').show(); 

$('.thumb').each(function() { 
    $(this).click(function() { 
     if (!$(this).hasClass('active')) { 
      $('.thumb.active').removeClass('active'); 
      $(this).addClass('active');   
      var thumbActif = $(this).attr('id'); 
      $('.slides.active').fadeOut('slow');   
      $('.slides.active').removeClass('active'); 
      $('#' + thumbActif + '-ban').addClass('active'); 
      $('.slides.active').fadeIn('slow'); 
     } 
    }); 
});