Javascript 使用动画更改循环中的html元素

所以我有一个幻灯片横幅。。当每张幻灯片出现时，还将有1.一个引号（包含它的div是

.msgSlide

）2.一个buttton（包含它的div是

.btnSlide

）。。第一张幻灯片的当前片段是->

$(function() {
    $('.msgSlide').animate({left: "0%"}, 1000, function() {
        $('.msgSlide')
          .hide()
          .html("<p>Dream Big.. Never give up.</p>")
          .show()
          .animate({left: "40%"}, 1000)
          .animate({opacity: "0"}, 3000);
    });

    $('.btnSlide').animate({right: "0%"}, 2000, function() {
        $('.btnSlide')
          .hide()
          .html("<button class='btn btn-lg btn-primary'>Learn more</button>")
          .show()
          .animate({right: "20%"}, 1000)
          .animate({opacity: "0"}, 2000);
    });
});

$（函数（）{
$（'.msgSlide'）.animate（{left:“0%”），1000，function（）{
$（“.msgSlide”）
.hide（）
.html（“梦想远大……永不放弃。
”）
.show（）
.animate（{左：“40%”，1000）
.animate（{opacity:“0”}，3000）；
});
$（'.btnSlide'）.animate（{right:“0%”），2000，function（）{
$（“.btnSlide”）
.hide（）
.html（“了解更多”）
.show（）
.animate（{右：“20%”，1000）
.animate（{opacity:“0”}，2000年）；
});
});

当前代码段小提琴->

我想根据幻灯片的数量，用不同的段落和按钮文本循环这个模式

---

更新->我正在尝试类似的东西->（但不起作用）

好吧，可能是一个基本问题，这就是为什么没有人回答的原因。。我自己已经想出了解决办法。。请建议你是否有更好的解决方案

$(function() {
    var msgValue=["<p>Dream Big.. Never give up.</p>",
                    "<p>Some quote i haven't looked up yet.</p>",
                    "<p>I am not so good with quotes.</p>"],
        btnValue=["<button class='btn btn-lg btn-primary'>Learn more</button>",
                    "<button class='btn btn-lg btn-warning'>Learn more</button>",
                    "<button class='btn btn-lg btn-danger'>Learn more</button>"],
        count=0;
    function loop(count) {
        $('.msgSlide')
                .css({left:0, opacity:0})
                .fadeIn(2000)
                .html(msgValue[count]);
        $('.msgSlide')
                .animate ({ left: '30%', opacity: '1'}, 1500, 'linear').fadeOut(2000);
        $('.btnSlide')
                .css({right:0, opacity:0})
                .fadeIn(2000)
                .html(btnValue[count]);
        $('.btnSlide')
                .animate ({ right: '30%', opacity: '1' }, 1500, 'linear').fadeOut(2000,
                function() {
                    loop(count);
                });
        count++;
        if(count==msgValue.length){ count=0; }
    }
    loop(count);
});

$（函数（）{
var msgValue=[“梦想远大……永不放弃。
”，
“一些我还没有查过的引用。
”，
“我对引号不太在行。
”]，
BTN值=[“了解更多”，
“了解更多”，
“了解更多”]，
计数=0；
函数循环（计数）{
$（“.msgSlide”）
.css（{左：0，不透明度：0}）
fadeIn先生（2000年）
.html（msgValue[count]）；
$（“.msgSlide”）
.animate（{左：'30%，不透明度：'1'}，1500，'linear'）。淡出（2000）；
$（“.btnSlide”）
.css（{右：0，不透明度：0}）
fadeIn先生（2000年）
.html（btnValue[count]）；
$（“.btnSlide”）
.animate（{右：'30%，不透明度：'1'}，1500，'linear'）。淡出（2000，
函数（）{
循环（计数）；
});
计数++；
如果（count==msgValue.length）{count=0；}
}
循环（计数）；
});

---

拉小提琴-

好吧，这可能是一个基本问题，这就是为什么没有人回答。。我自己已经想出了解决办法。。请建议你是否有更好的解决方案

$(function() {
    var msgValue=["<p>Dream Big.. Never give up.</p>",
                    "<p>Some quote i haven't looked up yet.</p>",
                    "<p>I am not so good with quotes.</p>"],
        btnValue=["<button class='btn btn-lg btn-primary'>Learn more</button>",
                    "<button class='btn btn-lg btn-warning'>Learn more</button>",
                    "<button class='btn btn-lg btn-danger'>Learn more</button>"],
        count=0;
    function loop(count) {
        $('.msgSlide')
                .css({left:0, opacity:0})
                .fadeIn(2000)
                .html(msgValue[count]);
        $('.msgSlide')
                .animate ({ left: '30%', opacity: '1'}, 1500, 'linear').fadeOut(2000);
        $('.btnSlide')
                .css({right:0, opacity:0})
                .fadeIn(2000)
                .html(btnValue[count]);
        $('.btnSlide')
                .animate ({ right: '30%', opacity: '1' }, 1500, 'linear').fadeOut(2000,
                function() {
                    loop(count);
                });
        count++;
        if(count==msgValue.length){ count=0; }
    }
    loop(count);
});

$（函数（）{
var msgValue=[“梦想远大……永不放弃。
”，
“一些我还没有查过的引用。
”，
“我对引号不太在行。
”]，
BTN值=[“了解更多”，
“了解更多”，
“了解更多”]，
计数=0；
函数循环（计数）{
$（“.msgSlide”）
.css（{左：0，不透明度：0}）
fadeIn先生（2000年）
.html（msgValue[count]）；
$（“.msgSlide”）
.animate（{左：'30%，不透明度：'1'}，1500，'linear'）。淡出（2000）；
$（“.btnSlide”）
.css（{右：0，不透明度：0}）
fadeIn先生（2000年）
.html（btnValue[count]）；
$（“.btnSlide”）
.animate（{右：'30%，不透明度：'1'}，1500，'linear'）。淡出（2000，
函数（）{
循环（计数）；
});
计数++；
如果（count==msgValue.length）{count=0；}
}
循环（计数）；
});

---

工作小提琴-

我想这就是你要找的。。也许这需要一些安排。。但你可以从这里开始

$(function() {
    var Divslength = $('.AnimateThis').length - 1;


    loopanimation($('.AnimateThis').eq(0));

    var count = 1;
    setInterval(function(){ 
        loopanimation($('.AnimateThis').eq(count));
        if(count == (Divslength)){
            count = 0;
        }else{
            count = count + 1;
        }
    },4000);
});

function loopanimation(el){
    $('.AnimateThis').fadeOut(300).css('z-index',0);
    el.css('z-index',1);
    el.fadeIn(300 , function(){
        el.find('.msgSlide')
              .animate({left: "-500px"}, 0)
              .hide()
              .html("<p>Dream Big.. Never give up.</p>")
              .show()
              .animate({left: "50%"}, 1000)
              .animate({left: "40%"}, 1000)
              .animate({opacity: "0"}, 3000)
              .animate({opacity: "1"}, 0)
        .animate({left: "-500px"}, 0);

         el.find('.btnSlide')
             .animate({right: "-500px"},0)
             .hide()
             .html("<button class='btn btn-lg btn-primary'>Learn more</button>")
             .show()
             .animate({right: "30%"}, 1000)
             .animate({right: "20%"}, 1000)
             .animate({opacity: "0"}, 3000)
             .animate({opacity: "1"}, 0)
             .animate({right: "-500px"},0);
       });

}

$（函数（）{
var Divslength=$（'.AnimateThis'）.length-1；
循环动画（$（'.AnimateThis'）.eq（0））；
var计数=1；
setInterval（函数（）{
循环动画（$（'.AnimateThis'）.eq（count））；
如果（计数==（除法长度））{
计数=0；
}否则{
计数=计数+1；
}
},4000);
});
函数循环动画（el）{
$（'.AnimateThis'）.fadeOut（300.css（'z-index'，0）；
el.css（'z指数'，1）；
el.fadeIn（300，函数（）{
el.find（“.msgSlide”）
.animate（{左：“-500px”}，0）
.hide（）
.html（“梦想远大……永不放弃。
”）
.show（）
.animate（{左：“50%”，1000）
.animate（{左：“40%”，1000）
.animate（{opacity:“0”}，3000）
.animate（{opacity:“1”}，0）
.animate（{左：“-500px”}，0）；
el.find（'.btnSlide'））
.animate（{右：“-500px”}，0）
.hide（）
.html（“了解更多”）
.show（）
.animate（{右：“30%”，1000）
.animate（{右：“20%”，1000）
.animate（{opacity:“0”}，3000）
.animate（{opacity:“1”}，0）
.animate（{右：“-500px”}，0）；
});
}

---

我想这就是你要找的。。也许这需要一些安排。。但你可以从这里开始

$(function() {
    var Divslength = $('.AnimateThis').length - 1;


    loopanimation($('.AnimateThis').eq(0));

    var count = 1;
    setInterval(function(){ 
        loopanimation($('.AnimateThis').eq(count));
        if(count == (Divslength)){
            count = 0;
        }else{
            count = count + 1;
        }
    },4000);
});

function loopanimation(el){
    $('.AnimateThis').fadeOut(300).css('z-index',0);
    el.css('z-index',1);
    el.fadeIn(300 , function(){
        el.find('.msgSlide')
              .animate({left: "-500px"}, 0)
              .hide()
              .html("<p>Dream Big.. Never give up.</p>")
              .show()
              .animate({left: "50%"}, 1000)
              .animate({left: "40%"}, 1000)
              .animate({opacity: "0"}, 3000)
              .animate({opacity: "1"}, 0)
        .animate({left: "-500px"}, 0);

         el.find('.btnSlide')
             .animate({right: "-500px"},0)
             .hide()
             .html("<button class='btn btn-lg btn-primary'>Learn more</button>")
             .show()
             .animate({right: "30%"}, 1000)
             .animate({right: "20%"}, 1000)
             .animate({opacity: "0"}, 3000)
             .animate({opacity: "1"}, 0)
             .animate({right: "-500px"},0);
       });

}

$（函数（）{
var Divslength=$（'.AnimateThis'）.length-1；
循环动画（$（'.AnimateThis'）.eq（0））；
var计数=1；
setInterval（函数（）{
循环动画（$（'.AnimateThis'）.eq（count））；
如果（计数==（除法长度））{
计数=0；
}否则{
计数=计数+1；
}
},4000);
});
函数循环动画（el）{
$（'.AnimateThis'）.fadeOut（300.css（'z-index'，0）；
el.css（'z指数'，1）；
el.fadeIn（300，函数（）{
el.find（“.msgSlide”）
.animate（{左：“-500px”}，0）
.hide（）
.html（“梦想远大……永不放弃。
”）
.show（）
.animate（{左：“50%”，1000）
.animate（{左：“40%”，1000）
.animate（{opacity:“0”}，3000）
.animate（{opacity:“1”}，0）
.animate（{左：“-500px”}，0）；
el.find（'.btnSlide'））
.animate（{右：“-500px”}，0）
.hide（）
.html（“了解更多”）
.show（）
.animate（{右：“30%”，1000）