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/