Question

所以我有一个幻灯片横幅..它也有1.A引用（包含它的div是.msgSlide）2.A每个幻灯片出现时，按钮（包含它的div是.btnSlide）。我目前的第一张幻灯片片段是＆gt;

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

当前摘录小提琴 - ＆gt; http://jsfiddle.net/zzmm4fue/2/

我想用不同的段落循环这个模式＆amp;按钮文本取决于幻灯片的数量！

更新 - ＆GT;我正在尝试这样的事情 - ＆gt; 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);
});

工作小提琴 - 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元素

2 个答案: