jQuery remove / addClass被忽略

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().fadeIn(300) .children().fadeOut(300)之后，它可能會忽略一切的任何原因是.children().fadeIn(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);
});