jquery - 如何在窗口调整大小时为元素宽度设置动画？

Question

不知道我这样做是否正确，但 jq 动画有点停滞，并且它会根据您是否按住鼠标（LC）调整大小而发生变化，从而每次都会产生奇怪的效果 http://jsfiddle.net/yMcXm/15/

如果窗口大小小于 680 像素，则所需的效果是平滑调整框的大小，如果大于 680，则将大小调整回 20%

我可能不确定使用了错误的功能。

任何帮助表示赞赏。

Answer 1

尝试如下，

var timer = null;
$(window).resize(function() {
    var getWidth = $(window).width();

    if (timer != null) clearTimeout(timer);

    timer = setTimeout(function() {
        alert(getWidth);
        if (getWidth < 680) {
            $(".box").animate({
                width: "49%"
            }, 1000);
        } else if (getWidth > 680) {

            $(".box").animate({
                width: "20%"
            }, 1000);
        }
    }, 500);

});

演示：http: //jsfiddle.net/yMcXm/16/