jquery窗口调整大小答案

【问题标题】：jquery window resizejquery窗口调整大小
【发布时间】：2009-12-31 13:45:20
【问题描述】：

我在下面有这个脚本，它将在窗口调整大小时调整“.content”的大小，它工作正常，但唯一的问题是它会一直等到调整大小完成，然后再调整“.content”的大小是否需要等待在窗口调整大小时平滑调整大小？

javascript

function foo(){
    //e.cancelBubble = true; 
    $('.content').each(function (){
        p = $('.content').parent();
        var ch = 0;
        var cw = 0
        c = p.children().each(function (i,n){
            ch +=$(this).height()
            cw +=$(this).width()
        });
        $(this).height(p.height()-(ch-$(this).height()) )
            .width(p.width()-(cw-$(this).width()) )
        t = $('#tmp');
        t.text('p:height: ' +p.height()+' c:'+ch );
    });
}
$(window).resize(foo)

css

        html,body{height: 100%; width: 100%; margin: 0; padding: 0; }
        .holder{
            width: 100%;
            height: 100%;
            background: yellow;
        }
        .header{ 
            background-color: red;
        }
        .footer{ 
            background-color: brown;
        }
        .content{
            background-color: #eeeeee;
        }

html

<body onload="foo();" onresize="foo()">
    <div class="holder">
        <div class="header">
            #header
        </div>
        <div class="content">
            #content
            <div id="tmp">Waiting...</div>
        </div>
        <div class="footer">
            #footer
        </div>
    </div>
</body>

【问题讨论】：

标签： jquery resize window

【解决方案1】：

我认为你应该使用jquery easing plugin。

http://ajaxmint.com/2009/11/jquery-animation-easing-plugin-example/

这会平滑动画。

【讨论】：

如果你想使用动画，记得在触发动画之前使用stop()，这样你就不会一次运行成千上万的堆叠动画。