FADEOUT/FadeIn для отображения, но если вы уже активны, не делать ничего

Question

Вы поймете мою проблему после просмотра моего jsfiddle;): http://jsfiddle.net/N_3G/L47h985u/

Все работает отлично, за исключением того, если вы нажмете на активном эмпирическое, процесс FADEOUT/FadeIn запускается :(! ...

Я просто хочу, чтобы завершить эту функцию, говоря: «Если ток большой палец активен, при нажатии на него, ничего не делать ...»

Я начинаю работать в jQuery, и я стараюсь изо всех сил.

Спасибо за чтение. Николас.

<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:

$('.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'); 
    } 
}); 
}); 

Немного CSS:

#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, но если вам нужно проверить условие по селектору (как вы знаете, это не должно быть имя класса: во-первых, идентификатор и т.д.), вы можете использовать проверку .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'); 
     } 
    }); 
});