image - divをスライドするときに画像を移動および縮小する方法は?

Question

私の目的を説明する画像を添付しました。 http://postimage.org/image/9cmg2z8vv/

デフォルトでは、大きな横長または縦長の画像をページの中央に配置します。画像をクリックすると、divが右からスライドインします。div は大きな画像を画面の中央から左 50% にプッシュし、大きな画像は画面の左 50% に収まるように縮小する必要があります。

これを解決する方法はありますか？

Answer 1

これは大まかなJavaScriptバージョンです。最高ではありませんが、始めることができます。HTML が表示されないため、他の div 内にどの div があるかはわかりませんが、トランジションでも基本的に同じことができます。

http://jsfiddle.net/jMwWK/1/

<div id="content">
    <div id="holder">
        <div id="image"></div>
    </div>
</div>
<div id="slider"></div>

$(document).ready(function(){
    setTimeout(function(){
        $('#slider').animate({left: '-200px'});
        $('#holder').animate({width: '50%'});
    },1000);
});