Jquery动画效果在第一次点击时不起作用

Question

当按下按钮时，我想在页面中切换 div 之间制作动画，并且我想要动画切换效果以淡入和淡出。但是当我点击前进箭头时效果不起作用，但是如果我点击后退箭头它会起作用。只是第一次点击前进箭头不起作用。

这是我的JSFiddle。

JS：

contentSlides = $('.article-wrapper');
slidesLeng = contentSlides.length - 1;
index = 0;   
for (i = 0; i <= slidesLeng; i++) {
    $(contentSlides[i]).addClass('slide-' + i);
}



$('.next').on('click', function () {
    if (index != slidesLeng) {
        $(contentSlides[index]).animate({'opacity':'0'},1000).removeClass('active');
        index = index + 1;
        $(contentSlides[index]).animate({ 'opacity': '1'},1000).addClass('active');

    }


});

$('.prev').on('click', function () {
    if (index != 0) {
        $(contentSlides[index]).animate({ 'opacity': '0'},1000).removeClass('active');
        index = index - 1;
        $(contentSlides[index]).animate({ 'opacity': '1'},1000).addClass('active');

    }


});

Answer 1

为什么不简单地使用.fadeOut() 和.fadeIn()？很简单！

$('.next').on('click', function () {
  if (index != slidesLeng) {
    $(contentSlides[index]).fadeOut(1000, function () {
      $(this).removeClass('active');
      index++;
      $(contentSlides[index]).fadeIn(1000).addClass('active');
    });
  }
});

$('.prev').on('click', function () {
  if (index != 0) {
    $(contentSlides[index]).fadeOut(1000, function () {
      $(this).removeClass('active');
      index--;
      $(contentSlides[index]).fadeIn(1000).addClass('active');
    });
  }
});

小提琴：http://jsfiddle.net/fm95wc4k/