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. positionスパンを指定する必要があります。指定しないと、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（）メソッドに送信できるマップと似ています。

もう1つのアイデアは、コールバックを使用して、アニメーションが完了すると単語を変更し、元の場所に戻すことができるようにすることです。関数が間違っているとは思いませんdelayが、動的性ははるかに低く、本を作成していると思われる場合は、何かが完了した後にプログラムが何かを実行することを知っていれば便利です。これがフィドルです。たぶん私が目を覚ますとき、私はもう少し追加する/私の答えを編集するでしょうが、あなたが始める/考えるための何かだけです:)

于 2012-12-01T11:20:16.870 に答える