jQuery 自動ズームスライドショー ズームの基準点

Question

jQueryでウィンドウサイズいっぱいに画像表示しズームしながらフェードアウトするスライドショーを作りたいのですが、画像のズームの基準が左上からになってしまっているのでこれを画像の中心からズームするようにしたいです。

//自動ズームスライドショー
  var count=$("#slide li").length;
  var current=1;
  var next=2;
  var interval=6000;
  var duration=1000;
  var zoomSpeed=6000;
  var timer;
  $("#slide li:not(:first-child)").hide();
  timer=setInterval(slideTimer,interval);
  function slideTimer() {
    $("#slide li:nth-child("+current+")").fadeOut(duration);
    $("#slide li:nth-child("+next+") img").css({width:'100%',height:'100%',top:'0px',left:'0px'});
    $("#slide li:nth-child("+next+")").fadeIn(duration);
    $("#slide li:nth-child("+next+") img").animate({width:'110%',height:'110%'},zoomSpeed);
    current=next;
    next=++next;
    if(next>count) {
      next=1;
    }
  }

上のコードで画像を自動でスライドしてズームまではできるのですが、ズームが左上からになってしまいました。中心からズームをさせたいです。

試したこと

• animateのプロパティでtopとleftを50%にしたが基準が変わらなかった。
• cssでtransform-originプロパティでleftとtopを50%にしてみたが同じく変化はなかった。

どなたかわかる方いらっしゃいましたら、アドバイスを頂けると嬉しいです。

Answer 1

width heightではなく、transform: scale(1.1);で処理すればよいとおもいます。
また、animateではなく全てCSSで処理するほうが軽量になると思います。

【scale() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/scale

Comments

[muratariku]

返信遅くなってすいません！
ありがとうございます。addClassでscaleを入れたクラスをつける様にしたらできました！