如何设置CSS大小的动画？

Question

我有以下CSS：

<style type="text/css">
    #list { overflow:auto; }
    #list li { float:left; margin-right:10px; }

    div { width:500px; height:500px; border:1px solid gray; position:relative; }
    iframe { border:0 none; width:100%; height:100%; display:block; }
    span.togglebutton { position:absolute; left:0; top:0; background-color:black; padding:3px; color:white; }

    div.maximized { position:fixed; top:0; left:0; width:100%; height:100%; border:0 none; z-index:9; }
  </style>

这被称为：

$("span.togglebutton").click(function() {
        var $this = $(this);
        $this.closest("li").children("div").toggleClass("maximized");
});

本质上，它使我的iFrame最大化/最小化为全屏显示。 我要设置最大化和最小化的动画。 我该怎么做呢？

更新这是我使用腺苷代码的代码：

$("span.togglebutton").click(function() {
        var $this = $(this);
        var currentText = $this.text();
        var theFrame = $(this).closest("li").children("div");

        if (currentText === "Maximize") {
            $this.text("Minimize");
            theFrame.animate({height: "100%", width: "100%"});
        }
        else {
            $this.text("Maximize");
            theFrame.animate({height: "50%", width: "50%"});
        }
    });

效果很好，除了我希望最大化以接管全屏。 我怎样才能做到这一点？

Answer 1

有多种方法可以动画化类转换，但我想我会选择其他方式。

取决于最小化的含义，但是您可以查看toggle（）而不是toggleClass（），并完全删除类，因为toogle允许动画，但完全隐藏了元素。

另一个选择是仅在高度和宽度上使用animate（）来最大化和最小化您的iframe。 使用if语句，可以在要为其设置动画的大小上创建切换效果。

iframe存在一些跨域问题，但是如果它与toggleClass（）一起使用，它可能也应该与animate（）一起使用。 示例假定iframe的ID为#myiframe，并且未经过测试，因此可能会出现错误，仅用于示例。

#myiframe { position:fixed; top:0; left:0; width:40%; height:40%; border:0 none; z-index:9; }

-

$("span.togglebutton").click(function() {
    var elm = $(this).closest("li").children("div");
    if (elm.css("height") == "40%") {
       elm.animate({height: "100%", width: "100%"});
    }
    else {
       elm.animate({height: "40%", width: "40%"});
    }
});

编辑：另一个选项是设置iframe大小（以像素为单位）并将其设置为屏幕大小的动画：

#myiframe { position:fixed; top:0; left:0; width:400px; height:400px; border:0 none; z-index:9; }

-

$("span.togglebutton").click(function() {
    var H = window.height();
    var W = window.width();
    var elm = $(this).closest("li").children("div");
    if (elm.css("height") == "400px") {
       elm.animate({height: H, width: W});
    }
    else {
       elm.animate({height: "400px", width: "400px"});
    }
});

也许您可以将其用于填充，因为我不确定为什么iframe不能动画到100％，但是它可能受其他元素或诸如此类的约束，所以它达到了100％，只有这样做了在它所定位的元素中。使用从屏幕尺寸获取的绝对像素应该可行，或者介于两者之间？ 但不幸的是，您无法在css / jQuery中混合像素和百分比。 使用像素还需要在浏览器调整大小时更新大小的功能。

Answer 2

老实说，这有点棘手...要使其正常运行，需要做很多工作。

这是使用jQuery的工作演示

我希望你喜欢它。 我从头开始制作它以确保它能正常工作。 我在顶部添加了一个（工具）栏，以便可以容纳我的控件，并进行一些调整可以使图像和控件与容器div正确对齐。

我认为确实没有“更智能”的方式可以做到这一点。 调整大小事件的bind / unbind是至关重要的，否则，调整大小事件将中断。

PS; 是google使得它在动画中有点古怪（它具有自己的调整大小事件，并在动画中不断触发），我只是没想到可以使用在iframe中也可以使用的更好的网站（stackoverflow不会“T）。

编辑：

根据评论中的要求； 这是页面上多个框架的版本。 没有经过全面测试，可以使用一些优化，但是我很累，所以今天不会发生;）

http://jsfiddle.net/sg3s/BT4hU/35/

Answer 3

这应该是您的之后：

类转换

不知道固定位置的过渡效果如何，但是肯定有解决方法。

Answer 4

将动画链接到您的toggleClass， http： //api.jquery.com/animate/