javascript - jquery remove/addClass being ignored -

i attempting make slider of own, without templates. have ran issue already.

when attempt removeclass('active') or attempt addclass('active') after .children().fadeout(300) or .children().fadein(300) and possibly more, seems ignored.

here code:

$(document).ready(function() {    var numofslides = $('div.slider > div').children().length;    var = 0;      while (i < numofslides) {      $('div.slides div.count').append('<i class="fa fa-fw fa-circle-o"></i>');      i++;    };    = 0;      $('div.slider div.content:nth-child(1)')      .addclass('active')      .children().fadein(300);    $('div.slides i.fa:nth-child(1)')      .removeclass("fa-circle-o")      .addclass("fa-circle");      window.setinterval(function() {      $('div.slider div.active')        .children().fadeout(300)        .removeclass('active');    ///<-- issue    }, 2000);  });

<div class="slider">    <div class="slide cnt-main wrp">      <div class="cnt-mdl">        <div class="cnt-inr content">          <h1>slide 1</h1>          <p>aliquam convallis pharetra feugiat. quisque euismod ipsum arcu, eget lacinia leo faucibus vel. donec eget augue nec lorem rutrum ultricies sit amet eget orci. vivamus quis tortor vel erat aliquet elementum sit amet elementum diam. phasellus gravida            metus.</p>        </div>        <div class="cnt-inr content">          <h1>slide 2</h1>          <p>aliquam convallis pharetra feugiat. quisque euismod ipsum arcu, eget lacinia leo faucibus vel. donec eget augue nec lorem rutrum ultricies sit amet eget orci. vivamus quis tortor vel erat aliquet elementum sit amet elementum diam. phasellus gravida            metus.</p>        </div>      </div>    </div>    <div class="slides cnt-main">      <div class="cnt-mdl">        <div class="cnt-inr count">          </div>      </div>    </div>  </div>

any reason why might ignoring things after running .children().fadein(300) or .children().fadeout(300) ?

edit managed make work around , seems working fine:

$(document).ready(function() {   var numofslides = $('div.slider > div').children().length;   var activeindex;   var = 0;    while(i <= numofslides) {     $('div.slides div.count').append('<i class="fa fa-fw fa-circle-o"></i>');     i++;   };   = 0;    $('div.slider div.content:nth-child(1)')     .addclass('active')     .children().fadein(300);    activeindex = $('div.slider div.active').index() + 1;    $('div.slides i.fa:nth-child(1)')     .removeclass("fa-circle-o")     .addclass("fa-circle");    window.setinterval(function() {     $('div.slider div.active').fadeout(300, function() {       $(this).children().fadeout(300);       $(this).removeclass('active');       if(activeindex <= numofslides) {         $(this).next('.content').addclass('active');         $(this).next('.content').css('display', 'block');         $(this).next('.content').children().fadein(300);          activeindex = $('div.slider div.active').index() + 1;          $('div.slides i.fa-circle')           .removeclass('fa-circle')           .addclass('fa-circle-o');         $('div.slides i:nth-child(' +activeindex+ ')')           .removeclass('fa-circle-o')           .addclass('fa-circle');       } else {         $('div.slider div.content:nth-child(1)').addclass('active');         $('div.slider div.content:nth-child(1)').css('display', 'block');         $('div.slider div.content:nth-child(1)').children().fadein(300);          activeindex = $('div.slider div.active').index() + 1;          $('div.slides i.fa-circle')           .removeclass('fa-circle')           .addclass('fa-circle-o');         $('div.slides i:nth-child(' +activeindex+ ')')           .removeclass('fa-circle-o')           .addclass('fa-circle');       };     });   }, 5000); }); 

did want remove class after fadeout? in case use callback:

$('div.slider div.active').children().fadeout(300, function(){     $(this).removeclass('active'); });