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

<强> UPDATED FIDDLE

Answer 2

使用jquery

＆＃13;

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

＆＃13;

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

jquery animate（从左到右）循环

2 个答案: