How to animate CSS resize?

I have the following 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.togg开发者_开发问答lebutton { 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>

This is being called:

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

Essentially it maximizes/minimizes my iFrame to be fullscreen. I want to animate the maximize and minimize. How can I go about doing this?

UPDATE Here is my code using adeno's code:

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

This works well, except I would like the maximize to take over the FULL screen. How can I do this?

There are ways to animate class transitions, but I think I would opt for something else.

Depends what minimized means, but you could look at toggle() instead of toggleClass() and drop the classes entirely as toogle allows animation, but hides the element completely.

Another option would be to just use animate() on height and width to maximize and minimize your iframe. With an if statement you could create a toggle effect on the sizes you wish to animate to and from.

There are some cross domain issues with iframes, but if it's working with toggleClass() it should probably work with animate() as well. Example assumes the iframe has an id of #myiframe, and it's not tested so there could be errors, just to show an example.

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

Edit: Another option would be to set the iframe size in pixels and animate it to the size of the screen:

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

Maybe you could use that for someting, as not I'm not sure why the iframe does not animate to 100%, but it is probably constrained within an other element or someting like that, so it goes to 100%, only it does so within the element it is positioned in. Using absolute pixels gotten from the screen size should work, or maybe something inbetween? but unfortunately you can't mix pixels and percent in css/jQuery. Using pixels would also require a function for updating the size on browser resize.

This is a little tricky to be quite honest... to make it behave correctly there is quite a lot that needs to be done.

Here is a working demo using jQuery

I hope you like it. I made it from scratch to ensure it would work. I added a (tool)bar on the top so it could hold my controls, with some tweaking you could make that an image and make the controls be right aligned to the container div.

Theres really no 'smarter' way to do this I think. The resize event bind / unbind is critical, without it this would break on a resize.

PS.; It's google that is making it a little wonky in the animation (it has resize events of it's own which are triggered constantly in the animation), I just couldn't think of a better website to use that also works in an iframe (stackoverflow doesn't).

Edit:

As per request in comments; here is a version for multiple frames on a page. Not thoroughly tested and could use some optimization but I am very tired so that is not going to happen today ;)

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

This should be what your after:

Class Transitions

Not sure how well it'll transition with fixed positioning, there's sure to be a workaround though.

chain the animation to your toggleClass, http://api.jquery.com/animate/