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

Answer 2

你可能在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"
            });
        }
    });
});

jsFiddle

参考文献： .scroll()，.animate()

jQuery：滚动时平滑宽度变化

2 个答案: