使用动画循环更改 html 个元素

Question

所以我有一个幻灯片横幅..它也会有 1.A 引用（div 包含它是 .msgSlide）2.A 按钮（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);
    });
});

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

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

更新-> 我正在尝试这样的事情-> http://jsfiddle.net/zzmm4fue/3/（虽然不工作）

Answer 1

好吧，这可能是一个基本问题，所以没有人回答。我自己想出了解决方案。如果你有更好的解决方案，请提出建议

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

工作fiddle- http://jsfiddle.net/zzmm4fue/12/

Answer 2

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

$(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

使用动画循环更改 html 个元素

Changing html elements in a loop with animation

javascript

jquery

jquery-animate