javascript - jQuery:在滚动时平滑改变宽度

Question

我有可用的 jQuery 代码:

$(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                 if(scroll_pos < 10 ) {
                    $("div").css('width', 75);
                } else if(scroll_pos > 25 && scroll_pos < 75) {
                    $("div").css('width', 100);
                } else if(scroll_pos > 75 && scroll_pos < 100){
                    $("div").css('width', 125);
                }else if(scroll_pos > 100){
                    $("div").css('width', 150);
         } 
    });
});

和一个宽度为 75px 的 div 元素。

使用该代码，当用户向下滚动时，潜水元素分四步将宽度从 75px 更改为 150px，但我正在寻找可以将宽度从 75px 平滑地更改为 150px 的东西，无需任何步骤，知道吗？

Answer 1

也许这个解决方案就是你想要得到的:

$(document).ready(function(){       
    var scroll_pos = 0;
    $(document).scroll(function() {
        scroll_pos = $(this).scrollTop();
        if (scroll_pos > 150) {
            scroll_pos = 150;
        };
        $("div").animate({
            width : (75+0.75*scroll_pos)+"px"
        });
    });
});