jquery remove/addClass being ignored

Question

I am attempting to make a slider of my own, without templates. But I have ran into an issue already.

When I attempt to removeClass('active') or attempt to addClass('active') after .children().fadeOut(300) or .children().fadeIn(300) and possibly even more, it seems to be ignored.

Here is my code:

$(document).ready(function() {
  var numOfSlides = $('div.slider > div').children().length;
  var i = 0;

  while (i < numOfSlides) {
    $('div.slides div.count').append('<i class="fa fa-fw fa-circle-o"></i>');
    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');    ///<-- the 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 it might be ignoring things after running .children().fadeIn(300) or .children().fadeOut(300) ?

Edit I managed to make a work around and it seems to be working fine:

$(document).ready(function() {
  var numOfSlides = $('div.slider > div').children().length;
  var activeIndex;
  var i = 0;

  while(i <= numOfSlides) {
    $('div.slides div.count').append('<i class="fa fa-fw fa-circle-o"></i>');
    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);
});

use complete callback instead of chaining function call jsfiddle.net/t7y6h5dy — Jonathan Anctil
– Jonathan Anctil, Commented Jul 23, 2015 at 14:02
@JonathanAnctil even when using the answer given by @vojtech-b .removeClass() still gets ignored — 099
– 099, Commented Jul 23, 2015 at 14:04
I think your selector $('div.slider div.active').children() is wrong. What I get is the first section element but there's no active class. The parent element is active instead. — Jonathan Anctil
– Jonathan Anctil, Commented Jul 23, 2015 at 14:10

Jonathan Anctil · Accepted Answer · 2015-07-23 14:35:57Z

1

Did you want to remove the class after the fadeOut? In that case use callback:

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

edited Jul 23, 2015 at 14:35

Jonathan Anctil

1,0574 gold badges23 silver badges46 bronze badges

answered Jul 23, 2015 at 13:58

Vojtech B

2,9777 gold badges35 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

099 Over a year ago

Even when using this code .removeClass('active') still gets ignored for me (Google Chrome).

099 · Accepted Answer · 2015-07-23 14:42:24Z

I've managed to figure it out, thanks for the help that you guys offered.

$(document).ready(function() {
  var numOfSlides = $('div.slider > div').children().length;
  var activeIndex;
  var i = 0;

  while(i <= numOfSlides) {
    $('div.slides div.count').append('<i class="fa fa-fw fa-circle-o"></i>');
    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;
        console.log(activeIndex);

        $('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;
        console.log(activeIndex);

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

Collectives™ on Stack Overflow

jquery remove/addClass being ignored

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related