1

HTMLでフレームのサイズ変更をアニメーション化することは可能ですか?

水平方向に積み重ねられた 2 つのフレーム (残り 500px など) がある Web ページがあります。「最小化」画像をクリックすると、左側のフレームが約 100px に縮小されます。jquery/javascript/css を介してこの縮小をアニメーション化することは可能ですか?

4

3 に答える 3

3

あなたが内側のフレームをアニメートしようとしているなら、私はモール博士の答えに行きます。ただし、フレームセットをアニメーション化しようとしている場合は、手動でアニメーション化する必要があります。以下の例はを示しています。それを調べるには、ローカルWebサーバーを使用して、ドメイン間の制限に関する問題を回避することをお勧めします（少なくとも、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>
于 2012-07-08T08:28:51.577 に答える
2

jQuery のanimateを使用します。

$('#frameselector').animate({width:100});
于 2012-07-08T07:58:53.360 に答える
1

はい、ほとんどの CSS プロパティをアニメーション化できます。

サンプルを次に示します。左のフレームをクリックすると、右のフレームがアニメーション化され、サイズが縮小されます。

これは次を使用して行われます。

$('#a').click(function(){
    $('#b').animate({
        height: '50px'
    }, 5000);
});​
于 2012-07-08T08:00:32.787 に答える