jQueryの自作スライダーについて

ご覧いただきありがとうございます。
jQueryを使って自作スライダーの作成を検討しています。

・画像が左から右にゆっくり移動
・ブラインドのような形で左から右に画像が切り替わる

上記の条件を満たすスライダーとして以下のコードを作成しました。

style
1.mainslider {
2  width: 100%;
3  height: auto;
4  padding-top: 56%;
5  position: relative;
6}
7.mainslider #slide-wrap {
8  position: absolute;
9  left: 0;
10  top: 0;
11  right: 0;
12  bottom: 0;
13  z-index:1;
14}
15.mainslider #slide-wrap li {
16  width: 100%;
17  height: 100%;
18  position: absolute;
19  right: 0;
20  top: 0;
21  -webkit-animation: bgscroll 5s linear infinite;
22  animation: bgscroll 5s linear infinite;
23  z-index: 2;
24}
25.mainslider #slide-wrap li:first-child {
26  z-index:3;
27}
28@-webkit-keyframes bgscroll { 0% {background-position:-50px 0;} 100% {background-position: 0px 0;}}
29@keyframes bgscroll { 0% {background-position: -50px 0;} 100% {background-position: 0px 0 ;}}

jQuery
1$(function(){
2  $("#slide-wrap").find("li:not(:first-child)").hide();
3
4  setInterval(function(){
5    $("#slide-wrap").find("li:first-child").animate({width:0},500, "linear")
6    .next("li").fadeIn(500)
7    .end().appendTo("#slide-wrap");
8    $("#slide-wrap li").css("width","100%");
9  }, 5000);
10});

html
1<div class="mainslider">
2  <ul id="slide-wrap">
3     <li style="background-image: url('img1.jpg')"></li>
4     <li style="background-image: url('img2.jpg')"></li>
5     <li style="background-image: url('img3.jpg')"></li>
6  </ul>
7</div>

やりたいことが出来たと思ったのですが、スライド2回目からおかしくなり、
結果ブラインドのスライドがうまくいきません。

お力を貸していただけますと嬉しいです、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

自己解決

アニメーションの時間を500→700に変更をしただけで求めていた動きになりました。
切り替えが早すぎて動作がおかしくなったのでしょうか・・
原因の解明はできていないのですが、ひとまず問題は解決したため、自己解決とさせていただきます。
ありがとうございました。

jQuery
1$(function(){
2  $("#slide-wrap").find("li:not(:first-child)").hide();
3
4  setInterval(function(){
5    $("#slide-wrap").find("li:first-child").animate({width:0},700, "linear")
6    .next("li").fadeIn(700)
7    .end().appendTo("#slide-wrap");
8    $("#slide-wrap li").css("width","100%");
9  }, 5000);
10});