javascript - 当我使用 Javascript 向下滚动时，我可以逐像素更改元素的宽度或任何其他样式吗？

Question

我有一个宽度为 100px 的 div，我想在每个滚动步骤中将宽度减少 1px，这样当我向下或向上滚动页面时，div 看起来就像是动画的。所以当我向下滚动 100 步时，div 消失了。我该怎么做？

Answer 1

使用几行 jQuery 的简单解决方案。

$(window).on('scroll', function(e){
     $('#box').css("width", 100-$(window).scrollTop());    
});

http://jsfiddle.net/vwrr6Lv1/1/

编辑:

如果您需要开始制作更精美的动画，我建议您查看支持 CSS3 转换和过渡的 jQuery Transit，例如

$(window).on('scroll', function(e){
    $('#box').transition({'perspective':'100px', 'rotateY': 100-$(window).scrollTop()}, 0);    
});

http://jsfiddle.net/vwrr6Lv1/3/

jQuery Transit 是 jQuery.animate 的一个很好的扩展，它支持 CSS3 过渡和变换。 http://ricostacruz.com/jquery.transit/