今度は、手前にズームイン(したかのように見える)エフェクトです。


デモ


▼下記の画像をクリックすると動作します。ズームイン!



コード


html

/*何か画像*/
<img id="example" src="http://wakana.me/wp/wp-content/uploads/2013/02/wackworks_logoh80px.png" />

javascript

$(function(){
    $('img').click(function(){
    var pos = $(this).position();
    $(this)
        .css({
        position:'absolute',
        top : pos.top,
        left : pos.left
        })
        .animate({
        opacity : 'hide',//hideとか設定できたのを今日まで知らなかったっていう。
        width : $(this).width() * 5 ,
        height : $(this).height() * 5,
        top : pos.top -($(this).height() * 5 / 2),
        left : pos.left - ($(this).width() * 5 / 2)
        },
        'slow');
    });
});