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

Question

我想在按下按钮时在页面中的 swiching div 之间制作动画，并且我想制作淡入淡出的 swich 效果动画。但是当我点击前进箭头时效果不起作用，但是如果我点击后退箭头它 works.Just 第一次点击前进箭头不起作用。

这是我的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');
    });
  }
});

Fiddle: http://jsfiddle.net/fm95wc4k/

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

Jquery animate effect not working at first click

javascript

jquery

slider

jquery-animate