jquery动画(从左到右)循环

Question

我试图实现的是图像滑块上的标题，用动画()从左到右滑动，然后随着图像的变化而淡出，然后在滑块启动后循环。我已经在这些论坛上搜索了几个小时，试图为循环找到一个解决方案，但我似乎无法让它们发挥作用。最有可能的是，我错过了一些东西，因为我只是刚开始学习jquery。

如果这个问题是重复的话，我很抱歉，但我已经试了好几个小时了，只是无法让它起作用。

下面是我到目前为止拥有的内容: HTML：

<div class="slidein">

        <p class="first"> MATTE</p> 
        <p class="second">BLACK</p>
        <p class="third">BRO </p>

</div>

CSS：

.slidein {
    z-index: 10000;
    left: -100px;
    top: 100px;
    position: absolute;}

.first {

    background-color:#0C0;
    position:relative;}

.second {

    background-color:#0C0;
    position:relative;}

.third {
    width: 35px;
    background-color:#0C0;
    position:relative;}

jquery：

$(document).ready(function () {


    function repeat() {
        $(".first").animate({left:'200px'},100);

        $(".second").delay(200).animate({left:'200px'},200);

        $(".third").delay(300).animate({left:'200px'},300);



        $('.slidein').delay(3500).fadeOut(500)({

            },500 ,function() {
            repeat();
        });
    }

 repeat();       



});

这里有一个小提琴在工作，但一旦完成就不能循环了，http://jsfiddle.net/elroyz/L2Ynu/18/

Answer 1

问题是，你期待一个滑动和隐藏的元素重新定位，并显示自己。您需要添加将显示元素的代码，并在函数开始时重新定位。如下所示：

function repeat() {
  $(".slidein").css({"left":'10px'}).show();
  $(".slidein").animate({left:'+=200px'},500);
  $('.slidein').delay(3500).fadeOut(500,repeat);
}

repeat();  

更新小提琴

Answer 2

用jquery

​

    $(document).ready(function () {
  console.log('ready');

  var james = $('#bond');

  var right = function () {
    james.animate({left: '100px'}, 600, left);
  };

  var left = function () {
    james.animate({left: '0px'}, 600, right);
  };

  right();
});

​

http://jsfiddle.net/yLNGn/32/