如何将字符串向左滑动，将文本替换为数组中的下一个元素，并重新滑动到合适的位置?

Here's the code on JSFiddle.

这是JSFiddle的代码。

I need a sentence to slide out to the left (out of view), change text to next line in story (next element in array) and slide back right, into place.

我需要一个句子向左边滑动(在视图之外)，将文本改为故事中的下一行(数组中的下一个元素)，然后向右滑动到合适的位置。

Also, I need to be able to have the whole thing repeat, but I expect that's just a matter of resetting i in the loop.

而且，我需要能够让整个事情重复，但我希望这只是一个重新设置我在循环中的问题。

Can you help me?

你能帮我吗?

HTML:

<p class="wrap"><span>Foo</span></p>

JS:

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');
}

What am I doing wrong?

我做错了什么?

3 个解决方案

#1

You can achieve it simply by animating the left property of a positioned container:

你可以通过动画一个定位容器的左属性来实现:

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

with the following CSS (note position: relative for the slider):

使用以下CSS(注意位置:滑块的相对位置):

.wrapper {
    background-color: #ffbbbb;
    width: 200px;
}

#slider {
    width: 100%;
    position: relative;
    left: -100%;
}

This is the script I used in my fiddle:

这是我在小提琴中使用的脚本:

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

#2

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

You need to specify position for span otherwise left property won't affect it.
您需要为span指定位置，否则左属性不会影响它。
You can't append a node to itself. $("selector").appendTo($("selector")) throws dom exception.
不能将节点附加到它自己。((“选择器”).appendTo美元(“选择器”))抛出dom异常。
You shouldn't animate left and right properties at the same time. It will stretch your element.
你不应该同时对左属性和右属性进行动画处理。它会拉伸你的元素。

http://jsfiddle.net/tarabyte/hBSdf/10/

#3

Still playing around with it but couple of things to start you off.

仍然在玩，但是有一些事情可以让你开始。

The animate() function in jQuery requires a CSS Map, specifically a position field or else it won't really work. You can see for yourself. I don't really know why exactly so if someone wants to jump in and explain why please do ><... to be more specific in the documentation it says:

在jQuery中，animate()函数需要一个CSS映射，特别是一个位置字段，否则它不会真正起作用。你可以自己看。我不知道确切的原因，所以如果有人想要加入进来并解释为什么请做><…在文件中更具体地说:

The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

唯一需要的参数是CSS属性的映射。此映射类似于可以发送到.css()方法的映射，但属性的范围更严格。

Another idea you want is use a callback so that once your animation completes, it can change the word, and then maybe move it back in place. I don't think the delay function is wrong but it is a lot less dynamic and if you are supposedly making a book, it'd be nice if the program just knew to do something after something was completed. Here is a Fiddle. Maybe when I wake up I'll add some more/edit my answer but just something to get you started/thinking :)

另一个想法是使用回调，这样一旦动画完成，它就可以更改单词，然后可能将它移回原处。我不认为延迟函数是错的，但它的动态性要差得多，如果你正在写一本书，如果程序在完成某件事之后就知道要做点什么就好了。这是一个小提琴。也许当我醒来的时候，我会增加一些/编辑我的答案，但只是一些让你开始/思考的东西:)

#1