jQuery:滚动时平滑宽度变化

jQuery: Smooth width changing on scroll

本文关键字：变化 平滑 滚动 jQuery      更新时间：2023-09-26

我有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 的东西，知道吗？

也许这个解决方案就是你试图得到的：

$(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"
        });
    });
});

你可能正在jQuery中寻找.animate（）。只需使用动画在滚动时更改div 的大小即可。

$(document).ready(function(){     
    $(document).scroll(function() { 
        $("div").animate({
            width : "150px"
        });
    });
});

对于滚动宽度的连续增量，请尝试这种方式。这会将每个滚动轴上的div 宽度增加 30px，并增加直到达到 150px。

$(document).ready(function(){  
    $(document).scroll(function() {
        if($("div").width() <= "150"){
            $("div").animate({
                width : "+=30"
            });
        }
    });
});

js小提琴

参考文献 ： .scroll（） ， .animate（）

相关文章：