Javascript 如何将字符串滑出到左侧，用数组中的下一个元素替换文本，然后滑回原位？

这是上面的代码

我需要一个句子滑到左边（看不见），将文本更改为故事中的下一行（数组中的下一个元素），然后向右滑回原位

此外，我需要能够重复整个过程，但我希望这只是在循环中重置

I

的问题

你能帮我吗

HTML:

​
Foo
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JS:

var stringArr=['1'，'2'，'3']，
i=0，
t=2000；
对于（i；i<3；i++）{
$（'.wrap span'）.delay（t）.animate（{'left'：'+=200px'}，'slow'）；
$（'.wrap span'）.text（stringArr[i]）.appendTo（$（'.wrap span'））；
$（'.wrap span'）.animate（{'right'：'+=200px'}，'slow'）；
}​

---

我做错了什么？

仍在玩弄它，但有几件事可以让你开始

jQuery中的函数需要一个CSS映射，特别是一个

position

字段，否则它将无法真正工作。你可以自己看。我真的不知道为什么，如果有人想插手并解释原因，请> ​

您需要为span指定

position

，否则

left

属性不会影响它

不能将节点附加到自身<代码>$（“选择器”）.appendTo（$（“选择器”）引发dom异常

不应同时设置左右属性的动画。它会拉伸你的元素

---

只需对定位容器的

left

属性设置动画即可实现：

<div class="wrapper">
  <div id="slider"></div>
</div>​

这是：

---

它实际上并没有按预期的那样工作。另外，

setInterval（）

在这里是一个错误的选择，因为函数的开始/结束时间没有保证，所以当两个或多个动画重叠时，您最终会出现小故障。您可以通过较小的

t

和较慢的动画轻松体验。这里的解决方案是使用回调或队列。我注意到，当页面第一次加载动画时，动画看起来很不稳定，但随后就没事了。有没有什么办法可以推迟启动，让它第一次看起来很棒？还有，我怎样才能关闭循环？@Ryan：检查我的编辑。使用

initalDelay

进行以后的启动，并使用

stop，start

函数重新启动更改。@Raffaele:实际上它是有效的

setInterval

足够精确，前提是您不会获得奥斯卡最佳动画奖。：）@YuryTarabanko不知道，也许您改进了代码，但没有更新小提琴-仍然不起作用，无论是在页面加载还是在您单击“开始”后：滑块甚至不会滑出屏幕。如果成功的话，我可以告诉你setInterval（）有什么问题，即使你不打算获得奥斯卡奖：）这从一开始就很顺利。做得好。谢谢我已经将我的动画策略转移到了这个。现在请注意，在代码< > StIdValk（）/代码>中看到了什么错误？基本上，每当你对一个API传递延迟时，你应该真正地认为它是一个提示：环境（浏览器、虚拟机或OS）将尽最大努力在延迟过期后执行回调。但在多进程环境中，无法保证函数何时真正被调用——在繁忙的机器上，两个或多个调用可能重叠并导致故障。当需要这种同步时，最好使用时钟，或者将代码放入循环中。在本例中，我使用了回调

var stringArr = ['One','Two','Three'],
    i = 0,
    t = 2000;

for ( i ; i < 3 ; i++) {
    $('.wrap span').delay(t).animate({'left': '+=200px'}, 'slow');
    $('.wrap span').text(stringArr[i]).appendTo($('.wrap span'));
    $('.wrap span').animate({'right': '+=200px'}, 'slow');
}​

var stringArr = ['One','Two','Three'],
    i = 0,
    t = 2000,
    initialDelay = 150,
    container = $(".wrap span"),
    len = stringArr.length,
    changer = function() {
        var step = (++i)%len;

        container.animate({'left': '+=200px'}, 'slow', function(){
            container.text(stringArr[step]).animate({left: '-=200px'}, 'slow');
        })


    },
    interval, stop = function(){
       interval = interval !== undefined && clearInterval(interval); 
    }, start = function() {
        stop();
        interval = setInterval(changer, t);
    };

    setTimeout(function() {
        changer();
        start();
    }, initialDelay);

<div class="wrapper">
  <div id="slider"></div>
</div>​

var strings = "Lorem ipsum dolor sit amen".split(" "),
    offset = 0,
    delay = 1500,
    slider = $("#slider");

var swap = function(element, strings, offset) {
    element.text(strings[(offset++) % strings.length]);
    element.animate({"left": "0%"});
    element.delay(delay).animate({"left": "-100%"});
    element.queue(function(next) {
        swap(element, strings, offset);
        next();
    });
}

swap(slider, strings, offset);