javascript - 如何获得平滑的 JavaScript 弹出窗口大小调整

Question

我希望弹出窗口在关闭之前调整为最小尺寸。我希望用户看到动画，以便他们了解他们正在使用的窗口正在消失。

我想出了以下代码，但它非常锯齿。有没有更顺畅的方法呢？ 谢谢!

function resizeWindow() {

    setTimeout(function() {
        window.resizeTo(500, 500);
    }, 100);
    setTimeout(function() {
        window.resizeTo(475, 475);
    }, 125);
    setTimeout(function() {
        window.resizeTo(450, 450);
    }, 150);
    setTimeout(function() {
        window.resizeTo(425, 425);
    }, 175);
    setTimeout(function() {
        window.resizeTo(400, 400);
    }, 200);
    setTimeout(function() {
        window.resizeTo(350, 350);
    }, 250)
    setTimeout(function() {
        window.resizeTo(300, 300);
    }, 300);
    setTimeout(function() {
        window.moveTo(900, 600);
    }, 350);
    setTimeout(function() {
        window.resizeTo(100, 100);
    }, 400);
    setTimeout(function() {
        window.resizeBy(10, 10);
    }, 500);
    setTimeout(function() {
        window.close();
    }, 500);

}

Answer 1

使用jQuery 动画 http://api.jquery.com/animate/

下面的函数可以与任何 div 大小一起使用，并且您可以设置任何您想要的动画时间

$(".closeBtn").click(function() {
  var parentElem = $(this).parents(".popup").first() ; //Get the parent div that needs to be closed
  
  parentElem.animate({ //set width and height of the parent div to 0
    "width": "0",
    "height": "0"
  },
  1000, //Animation time: 1000ms = 1 sec
  function() {
    parentElem.hide() ; //After the animation if finished, hide the div (you can use .remove() if you wish to remove the div completely
  })
}) ;

.popup{
  border: 1px solid #000;
  width: 250px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
  Pop up text goes here.
  <br />
  <a href="javascript:;" class="closeBtn">Click here to close</a>
</div>

Updated Answer

对上面的回答感到抱歉，但我没理解这个问题。

我已经想出了一个解决方案。我不知道这是否是完美的解决方案。但至少它有效。

下面是弹窗内容。

我创建了一个函数animateClose()，它将持续时间(以毫秒为单位)作为参数。

调用时，它将计算窗口的宽度和高度，然后将参数中给出的持续时间除以 10 来计算要执行的循环次数(弹出窗口将每 10 毫秒动画一次)

当弹出窗口达到给定的持续时间时，它将关闭

<div class="main">
    <a href="javascript:;" class="closeWindow">Close Window</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(function() {
        $(".closeWindow").click(function() {
            animateClose(500) ;
        }) ;
    }) ;

    function animateClose(time) {
        if (time == undefined || time == null) {
            time = 1000 ;
        }

        var w = $(window).width() ; //Get window width
        var h = $(window).height() ; //Get window height

        var loops = time * 0.1 ; //Get nb of loops

        var widthDecreasePercentage = (w / loops) * -1 ;
        var heightDecreasePercentage = (h / loops) * -1 ;

        var loopInterval = setInterval(function(){
            window.resizeBy(widthDecreasePercentage, heightDecreasePercentage) ;
            loops-- ;

            if (loops <= 0) {
                clearInterval(loopInterval) ;
                window.close() ;
            }
        }, 10);
    }
</script>