javascript - jquery remove/addClass 被忽略

Question

我正在尝试制作自己的 slider ，无需模板。但我已经遇到了一个问题。

当我尝试在.children().fadeOut(300)<之后removeClass('active')或尝试addClass('active')时 或 .children().fadeIn(300) 甚至可能更多，它似乎被忽略了。

这是我的代码:

$(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>

运行 .children().fadeIn(300) 或 .children().fadeOut(300) 后可能会忽略某些内容，有什么原因吗？

编辑我设法解决了这个问题，它似乎工作正常:

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

Answer 1

您想在淡出后删除该类吗？在这种情况下使用回调:

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