Jquery图像幻灯片滑出下一个图像

Question

以下jquery图像滑块完美运行。当前图像消失，新图像出现在＆＃34; sildeLeft＆＃34;影响。而不是那样，我想把消失改为＆＃34; slideRight＆＃34;然后是下一张图片。但无法弄清楚如何...感谢此代码的原始上传器。

CSS

#exampleSlider {
  max-height: 250px;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}


/*** SPECIAL FX ***/

.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible!important
}

@keyframes slideLeft {
  0% {
    transform: translateX(150%)
  }
  50% {
    transform: translateX(-8%)
  }
  65% {
    transform: translateX(4%)
  }
  80% {
    transform: translateX(-4%)
  }
  95% {
    transform: translateX(2%)
  }
  100% {
    transform: translateX(0%)
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%)
  }
  50% {
    -webkit-transform: translateX(-8%)
  }
  65% {
    -webkit-transform: translateX(4%)
  }
  80% {
    -webkit-transform: translateX(-4%)
  }
  95% {
    -webkit-transform: translateX(2%)
  }
  100% {
    -webkit-transform: translateX(0%)
  }
}

.slideRight {
  animation-name: slideRight;
  -webkit-animation-name: slideRight;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible!important
}

@keyframes slideRight {
  0% {
    transform: translateX(-150%)
  }
  50% {
    transform: translateX(8%)
  }
  65% {
    transform: translateX(-4%)
  }
  80% {
    transform: translateX(4%)
  }
  95% {
    transform: translateX(-2%)
  }
  100% {
    transform: translateX(0%)
  }
}

@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(-150%)
  }
  50% {
    -webkit-transform: translateX(8%)
  }
  65% {
    -webkit-transform: translateX(-4%)
  }
  80% {
    -webkit-transform: translateX(4%)
  }
  95% {
    -webkit-transform: translateX(-2%)
  }
  100% {
    -webkit-transform: translateX(0%)
  }
}

的jQuery

 $(function () {

  /* SET PARAMETERS */
  var change_img_time = 5000;
  var transition_speed = 600;
  var fxArr = ['slideLeft'];


  var specialfx = 'rand';

  var simple_slideshow = $("#exampleSlider"),
    listItems = simple_slideshow.children('li'),
    listLen = listItems.length,
    i = 0,

    changeList = function () {
      listItems.eq(i).fadeOut(transition_speed, function () {
        i += 1;
        if (i === listLen) {
          i = 0;
        }

        if (specialfx == 'rand') {
          randfx = fxArr[Math.floor(Math.random() * fxArr.length)];
          specialfx = randfx;
        }

        listItems.eq(i).fadeIn(transition_speed).addClass(specialfx);
      });

    };

  listItems.not(':first').hide();
  setInterval(changeList, change_img_time);

});