【jQuery】画像を切替後にズームを行う。

Twitterアプリのログイン前画面のような
画像が切り替わり、その後ちょっと画面がズームする動きに挑戦してみました。

まず、画像の切替については、下記サイトの方法で実現。
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法

次に画像切替後に、画像のズームです。
①画像の拡大
$(setImg + ' :first-child').animate({width:'150%',height:'150%',top:'-25%',left:'-25%'},zoomSpeed);
②次に表示する画像の大きさを初期化
$(setImg + ' :first-child').css({width:'100%',height:'100%',top:'0px',left:'0px'});

画像の拡大では、width、heightでそれぞれ拡大率を指定しています。
top、leftの指定は、拡大を画像の中心から行うため、表示位置を変更しています。
例えば、元々100%で表示していて、今回のように拡大率を150%にした場合
拡大した倍率の差を2で割った値がtop、leftの指定になります。
（150%-100%) / 2 = 25%

②では、①で拡大して非表示になっている画像が、次に表示される時に
元の大きさ、位置で表示されるように初期化を行っています。

ソース全体ではこのようになりました。

<script type="text/javascript">
$(function(){
    var setImg = '#example';
    var fadeSpeed = 1000;
    var switchSpeed = 5000;
    var zoomSpeed = 2000;

    // 全てのイメージを非表示
    $(setImg).children('img').css({opacity:'0'});
   
    // 最初のImgを表示
    $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

    // 画像の表示・非表示を切り替え

    setInterval(function(){
        // 画像の切替
        $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
        // 画像の拡大
        $(setImg + ' :first-child').animate({width:'150%',height:'150%',top:'-25%',left:'-25%'},zoomSpeed);
        // 次に表示する画像の大きさを初期化
        $(setImg + ' :first-child').css({width:'100%',height:'100%',top:'0px',left:'0px'});

    },switchSpeed);
});
</script>

<div id="example">
  <img src="/images/Sample.jpg" />
  <img src="/images/Sample2.jpg" />
</div>

スマホで見ると、画面を拡大するときにチラつくのが気になりますね。
ん～今後の改善ポイントですね。