Question

我正在尝试创建自己的滑块，没有模板。但我遇到了已经的问题。

当我在removeClass('active')或addClass('active') 以及可能更多后尝试.children().fadeOut(300)或尝试.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

您想在fadeOut之后删除该课程吗？在这种情况下使用回调：

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

Answer 2

我已经设法解决了，感谢你们提供的帮助。

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

jquery remove / addClass被忽略

2 个答案: