Jquery逐渐放大图像

Question

我的网站上有一个图片幻灯片，可以通过转换淡入淡出图像。我现在想要放大＆＃34;放大＆＃34;在图像上同时。我能想到的最简单的方法是逐渐增加图像的大小，但隐藏溢出。如何在保持网站图像的形状和大小的同时做到这一点？

JS

$(function() {
  slideShow();
  var imgArray = [
      'Images/image1.jpg',
      'Images/image2.jpg',
      'Images/image3.jpg',
      'Images/image4.jpg',
      'Images/image5.jpg',
      'Images/image6.jpg',
      'Images/image7.jpg',
      'Images/image8.jpg'
    ],
  curIndex = 0;
  imgDuration = 5000;

  function slideShow() {
  $("#slider")
    .fadeOut('slow', function() {
        var img = $("<img />").attr('src', imgArray[curIndex]).on('load', function() 
        {
                $("#slider")
                    .html(img)
                    .fadeIn('normal', function() 
                    {
                        curIndex++;
                        if (curIndex == imgArray.length) {
                            curIndex = 0;
                        }
                        setTimeout(slideShow, imgDuration);
                    });
            });
    });
  }

});

HTML

<div id="slider" style="height:68vh; width: 99vw;"></div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>