javascript - jQueryスライスdivをアニメート可能なセグメントに分割

Question

jQueryとCSSを使用してdivを2つに分割し、2つの部分を別々にアニメーション化することは可能ですか？

より適切に説明するには、次の図を参照してください。

どんな助けでも大歓迎です-事前に感謝します。

Answer 1

次のようなコンテナdivのペアで偽造できます：jsFiddleexample。

HTML

<div id="top"><div>Some text here</div></div>
<div id="bottom"><div>Some text here</div></div>​

CSS

#top,#bottom {
    background: #333;
    width:200px;
    height:100px;
    position:relative;
    overflow:hidden;
}
#top div {
    position:relative;
    top: 90px;
    color:#eee;
    text-align:center;
}
#bottom div {
    position:relative;
    top: -10px;
    color:#eee;
    text-align:center;
}

jQuery

$('#bottom').delay(2000).animate({
    bottom: '-200px'
},4000);
$('#top').delay(2000).animate({
    top: '-200px'
},4000);

</ p>

Answer 2

いいえ、そのようなdivを1つ表示することはできません。ただし、複製して各コピーのサイズを半分に制限してから、両方をアニメートすることもできます。

Answer 3

2つのdivを作成し、それぞれに。を設定できますoverflow:hidden;。

その後、テキストを左の同じ位置に配置しますが、1つはdivの少し下、もう1つは少し上に配置して、各テキストが半分に「カット」されるようにします。（またはこれはそれを行うための1つの回避策です）