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%"});
        }
    });

这很有效，除了我希望最大化以接管FULL屏幕。我怎么能这样做？

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

说实话这有点棘手......要使其表现正确，还有很多工作要做。

Here is a working demo using jQuery

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

Theres真的不聪明＆＃39;我想这样做的方法。 resize事件绑定/取消绑定很关键，没有它会在调整大小时中断。

PS .;它的谷歌在动画中有点不稳定（它已经调整了它自己的事件，这些事件在动画中不断被触发），我只是想不出一个更好的网站来使用也适用于iframe（stackoverflow不会）。

修改

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

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

Answer 3

这应该是你的事后：

Class Transitions

不确定它是如何通过固定定位过渡的，但肯定会有一种解决方法。

Answer 4

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

如何动画CSS调整大小？

4 个答案: