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 animation 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>

更新的答案

很抱歉上面的答案，但我想念这个问题。

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

以下是弹出窗口内容。

我创建了一个以animateClose()为参数的函数duration by milliseconds。

调用时，会计算窗口宽度和高度，然后通过将参数中给出的持续时间除以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>

Answer 2

这是使用setInterval代替setTimeout的实现。我怀疑它解决了“锯齿”动画的问题，但提供了对代码的改进。 DEMO

var child = window.open("www.google.com","_blank","toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=500,height=500");
function resizeWindow(child) {
    var width = 500;
    var height = 500;
    var timer = setInterval(function(){ 
      if(width > 10) {
        child.resizeTo(width-=25,height-=25);
      }else{
        child.close();
        clearInterval(timer);
      }     
    },0);
}
resizeWindow(child);

如何获得流畅的javascript弹出窗口调整大小

2 个答案: