Question

我在容量为3500px的容器中有一个500px宽的div，我希望500px div在我向下滚动页面时宽度慢慢减小到原始宽度的一半。我在jQuery中尝试使用.scroll的所有内容都会在页面加载时更改宽度，而不是在页面向下滚动时。

编辑我希望当页面上下滚动时，宽度可以向上和向下扩展。

这是我开始时的一个例子，我知道这显然不正确：

$（document）.ready（function（）{

$('#box').scroll(function() {
    $('#box').css('width', '250px');
});

}）;

Answer 1

你在盒子上滚动调用滚动功能吗？不，这是你正在调用滚动功能的窗口

$(document).ready(function() {

$( **window** ).scroll(function() {
   $('#box').css('width', '250px');
 });
});

并且关于缓慢减小尺寸会在你的盒子上应用这个css3属性

 #box
 {
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
 }

应用css3动画，因为如果同一页面上同时有很多动画，那么动画会更加流畅，而如果只是@daguru所说的一个简单动画，那么就是Jquery动画。

Answer 2

$(window).scroll(function() {
    $( "#box" ).animate({
        width: '250px'
    }, 5000, function() {
        // Animation complete.
    });
});

Answer 3

这是工作小提琴，动态改变它的宽度http://jsfiddle.net/CWe9t/1/

$(document).ready(function () {
    var initialWidth = $("#box").width();
    var minWidth = 250;

    $(document).scroll(function () {
        var x = initialWidth - (minWidth * ($(window).scrollTop()) / $("#box").height());
        $('#box').css('width', x);
    });
});

使用jQuery，如何滚动时如何更改div的大小？

3 个答案: