javascript - 使用动画循环更改 html 元素

Question

所以我有一个幻灯片横幅..其中还有1.一个引用(包含它的div是.msgSlide)2.一个按钮(包含它的div是.btnSlide) code>) 当每张幻灯片出现时..我当前的第一张幻灯片的代码片段是->

$(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);
    });
});

当前片段 fiddle -> http://jsfiddle.net/zzmm4fue/2/

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

更新->我正在尝试这样的事情-> http://jsfiddle.net/zzmm4fue/3/ (虽然不起作用)

Answer 1

我认为这就是您正在寻找的..也许需要一些安排..但您可以从这里开始

$(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);
       });

}

Working Demo