Question

是否可以在html中为帧的重新调整大小设置动画？

我有一个网页，其中有两个水平堆叠的框架（比如500px，剩余）。点击“最小化”图像后，左边的框架缩小到大约100px。是否可以通过jquery / javascript / css为这种缩小设置动画？

Answer 1

如果您正在寻找内部框架的动画，那么我会选择Molle博士的答案。但是，如果您要设置框架集的动画，则必须手动执行此操作。以下示例说明。要检查它，您最好使用本地网络服务器来避免跨域限制的问题（至少在Chrome中，还没有在其他任何地方对其进行测试......）。

frame1.html

<html>
    <body>
        frame 1
        <br />
        <a href='#' class='minimize'>Minimize</a>

        <script type="text/javascript" 
            src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type='text/javascript'>
            $(function () { 
                $('.minimize').click(function (evt) {
                    evt.preventDefault();
                    window.parent.minimize();
                    return false;
                });
            });
        </script>
    </body>
</html>

frame2.html

<html><body>frame 2</body></html>

frameset.html

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type='text/javascript'>
            $(function () { 
                var minimizeInterval = null;
                var current = 500;
                var pace = 15;
                var stop = 100;

                window.minimize = function () {
                    minimizeInterval = setInterval(function () {
                    console.log('minimizing...');
                        $('frameset').attr('cols', current + ',*');
                        current -= pace;
                        if (current < stop) 
                            clearInterval(minimizeInterval);
                    }, 10);
                };
            });
        </script>
    </head>

    <frameset cols="500,*">
        <frame id='frame1' src="frame1.html"></frame>
        <frame id='frame2' src="frame2.html"></frame>
    </frameset>
</html>

Answer 2

使用jQuery的animate：

$('#frameselector').animate({width:100});

Answer 3

是的，您可以为大多数css属性设置动画。

这是a sample：当您点击左框架时，右边的框架会动画并缩小尺寸。

这是使用：

完成的

$('#a').click(function(){
    $('#b').animate({
        height: '50px'
    }, 5000);
});

动画帧调整大小

3 个答案:

frame1.html

frame2.html

frameset.html