これが意味をなすかどうかはわかりませんが、説明するために最善を尽くします。現在、画面の x 軸全体を埋める image1 があります。j-queryを使用してこの画像をアニメーション化し、ボタンをクリックすると画像が開くようにする必要があります(誰かが閉じたカーテンを開くと、左側と右側が横に引っ張られることを考えてください)。
j-query はこのようにアニメーション化できますか? メソッド/効果は何と呼ばれますか? 現在、image2 は image1 の下にありますが、image2 を image1 の後ろに配置するにはどうすればよいですか? それとも、image2 が html にある必要があり、image1 がその上に重ねられている場合、それは逆でしょうか?
注：image1はdivです
次のような意味ですか : http://web.enavu.com/demos/dual_sliding_door/
私はあなたが何を説明しているのか理解していると思います。並べて配置された2つの要素が必要になります。左側の要素は画像の左側の50％を表示し、右側の要素は右側の残りの50％を表示します。次に、これらを画面外でアニメーション化します。左が全幅で左に移動し、右が全幅で右に移動して、その下に画像が表示されます。
単一要素：
IMGエレメント + ------------------------------------------------- ------------------------------ + | フル画像| + ------------------------------------------------- ------------------------------ +
2つの要素：
要素A要素B + ---------------------------------------- ++ ------- ------------------------------ + | 左50％IMG L || 右50％IMG | + ---------------------------------------- ++ ------- ------------------------------ + <----左からアニメーションオフ右からアニメーションオフ---->
アニメーション後：
--- + ---------------------------------------------- --------------------------- + --- L | 2番目の画像| R --- + ---------------------------------------------- --------------------------- + ---
したがって、各画像はそれらを表示するために2つの要素を必要とします。次のように、これをリストとして作成できます。
<ul id='slideshow'>
<li><img src='foo.png' /></li>
<li><img src='bar.png' /></li>
</ul>
jQueryを使用すると、リストアイテムの内容を次のように再構築できます。
<li>
<div class='left'>
<img src='foo.png' />
</div>
<div class='right'>
<img src='foo.png' />
</div>
</li>
<li>
<div class='left'>
<img src='bar.png' />
</div>
<div class='right'>
<img src='bar.png' />
</div>
</li>
この時点ULで、これらのリストアイテムをすべて保持するに固定の幅と高さを設定し、それらを親に対して0,0に配置することをお勧めします。次に、それぞれにaを与えて、z-indexそれらを互いに重ねます。
jQueryを使用すると、最も高い要素を取得し、その要素と要素を画面外z-indexでアニメーション化して、2番目に高いzインデックスを持つ要素を表示します。次に、最近アニメーション化された要素のを最低値より1小さい値に変更してから、その要素とアイテムを元の場所に戻します。leftrightz-indexleftright
次に、新しく表示されたリストアイテムで最後の手順を繰り返します。