クリックすると正面画像を上下に移動するには？、jQueryまたはCssで

Question

2つの円形画像があると仮定すると、前面の画像は背面の画像を完全にカバーします。正面画像をクリックすると、上方向に移動し、後ろ方向に移動し、それぞれの丸いエッジで停止します。 2回目のクリックで、前面の画像が背面の画像を覆います。

Answer 1

あなたが別の要素の上または下に要素を移動するために探しているなら、あなたはinsertBeforeとinsertAfterを使用することができますが：

$("#div1").insertAfter($("#div2")); 

がここにjsFiddleです：http://jsfiddle.net/Eb3cv/

Answer 2

サンプルCSS

.above{position:absolute;z-index:2} 
.under{position:absolute;z-index:3} 
.container{position:relative;z-index:1} 

サンプルオブジェクト

<div class="container"> 
<img id="img1" class="above" src="..." /> 
<img id="img2" class="under" src="..." /> 
</div> 

サンプルjQueryの

$('img').click(function(){ 

$('#img1').toggleClass('above'); 
$('#img1').toggleClass('under'); 
$('#img2').toggleClass('above'); 
$('#img2').toggleClass('under'); 

}); 

Here's an example