2

この質問が正確に重複していないことを願っています...しかし、これらの関連する質問のどれも私の問題に取り組むのに役立ちませんでした. 長方形の無限の「ストリーム」をアニメーション化したいと考えています。ユーザーが必要な要素をクリックするたびに:

  • 新しい要素を含むすべての要素が、2 番目の四角形が最初の四角形の場所に配置されるまでゆっくりと左に移動します。
  • フェードアウトする最初の長方形
  • 最後にフェードインする新しい四角形

これまでのところ、私はこれを思いつきました（jsFiddleによると）：

    $('.block').first().animate({
        opacity: 0.75,
        left: '-=50'
    }, 300, function() {
        $('.block').first().remove();
        addBlock(index++);
    });

不透明度のアニメーション化は正常に機能しますが、左への移動は機能しません。これはおそらく周囲のdivも原因であると思われます。しかし、正直に言うと、私は Web 技術についてあまり知識がありません。

  • 長方形を左に移動するにはどうすればよいですか?
  • 周囲のdivの「下にスライド」しながら、それらを左に移動できますか?
4

2 に答える 2

5

position:relativeCSS.blockエントリに追加して使用するだけmarginLeftで、目的の効果が得られます-

http://jsfiddle.net/BsEWp/67/

それをラッパー div の下にスライドさせるには、ラッパー要素に css プロパティを与えるだけですoverflow:hidden。

于 2012-07-27T10:02:17.943 に答える
2

こんな感じかも？

$('.block').first().animate({
    opacity: 0.25,
    width: '-=50'
}

また：

$('.block').first().animate({
    opacity: 0.25,
    marginLeft: '-=50'
}

それは動作します

于 2012-07-27T10:16:01.927 に答える