1

这是JSFiddle上的代码。

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

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

你能帮助我吗？

HTML：

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

我究竟做错了什么？

4

3 回答 3

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

​</p>

  1. 您需要指定positionspan 否则left属性不会影响它。
  2. 您不能将节点附加到自身。$("selector").appendTo($("selector"))抛出 dom 异常。
  3. 您不应该同时为左右属性设置动画。它会拉伸你的元素。

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

于 2012-12-01T11:32:05.190 回答
1

您可以简单地通过动画left定位容器的属性来实现它：

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

使用以下 CSS（position: relative滑块注意事项）：

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

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

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

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);
于 2012-12-01T11:41:24.590 回答
0

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

jQuery 中的animate()函数需要一个 CSS 映射，特别是一个position字段，否则它不会真正起作用。你可以自己看看。我真的不知道为什么，如果有人想介入并解释为什么请这样做 ><... 在文档中更具体地说：

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

您想要的另一个想法是使用回调，以便在您的动画完成后，它可以更改单词，然后可能将其移回原位。我不认为这个delay功能是错误的，但它的动态性要低得多，如果你要写一本书，如果程序只知道在完成某事后做某事，那就太好了。这是一个小提琴。也许当我醒来时，我会添加更多/编辑我的答案，但只是让你开始/思考的东西:)

于 2012-12-01T11:20:16.870 回答