Jquery 如何在调整窗口大小时设置元素宽度的动画？

不确定我是否做得对，但是jq动画有点停顿，它会随着你在调整大小时按住鼠标（LC）而改变，每次都会产生奇怪的效果

理想的效果是，如果窗口大小小于680像素，则平滑地调整长方体的大小；如果窗口大小大于680像素，则调整回20%

我可能使用了错误的函数不确定

感谢您的帮助。

请尝试下面的方法

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);

});

var定时器=null；
$（窗口）。调整大小（函数（）{
var getWidth=$（window.width（）；
如果（计时器！=null）clearTimeout（计时器）；
计时器=设置超时（函数（）{
警报（getWidth）；
如果（getWidth<680）{
$（“.box”）.animate({
宽度：“49%”
}, 1000);
}否则如果（getWidth>680）{
$（“.box”）.animate({
宽度：“20%”
}, 1000);
}
}, 500);
});

---

演示：

thnx供您尝试，但它仍然有点显示延迟，特别是如果我不放开左键。尝试使用这个@media查询，将其与jq masonry混合使用，使您的布局与CSS3媒体查询保持流畅。