Question

我想将页面的<div>元素展开为整个屏幕的宽度和高度。现在我能够做到这一点，但我也希望在<div>放大到屏幕尺寸时显示动画。

这是我用来制作动画的代码：

$htmlEditorContainer.animate({
    top: 0,
    left: 0,
    width: $(window).width(),
    height: $(window).height()
 },
 {
    duration: 1000,
    complete: function () {
    }
 });

但是使用此代码，<div>会直接显示100％的屏幕尺寸。

Answer 1

根据您的代码，您可以尝试此修改

$("#div").animate({
            top: 0,
            left: 0,
            width: $(window).width(),
            height: $(window).height()
        },
        1000,//duration
        'linear',//easing
        animationComplete //complete function
);

function animationComplete() {
    alert("Animation Completed");
}

Answer 2

您的jQuery代码似乎几乎正确（$htmlEditorContainer看起来很古怪）。也许你的HTML可能有问题。这是一个工作片段：

$( "#clickme" ).click(function() {
  $( "#htmlEditorContainer" ).animate({
    left: 0,
    top: 0,
    width: $(window).width(),
    height: $(window).height()
  }, {
    duration: 1000,
    complete: function () {
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<div id="htmlEditorContainer" style="position: absolute; top:50px; left: 10px; background-color:yellow;">HTMLEditorContainer</div>

如何在DIV中插入动画

2 个答案: