基于左滚动距离的不透明度答案

【问题标题】：opacity based on scroll left distance基于左滚动距离的不透明度
【发布时间】：2012-08-08 15:42:06
【问题描述】：

$(document).scroll(function() {

    var distanceLeft = $(document).scrollLeft();

    if( distanceLeft > 3800)
    {
        $('#first_circle').animate({
            opacity: 1
        }, 1000);
    }

    if( distanceLeft < 3800)
    {
        $('#first_circle').animate({
            opacity: 0
        }, 1000);
    }
)};

嗨我试图纠正这个问题，以便当滚动超过 3800 时 div 淡入，当用户向后滚动时它淡出？感谢您的任何意见

【问题讨论】：

这段代码有什么问题？
滚动时不动画为 0
你能做一个jsfiddle吗？
它基本上是这个jsfiddle.net/z7E9u/1，但我希望元素在 3575 和 4150 之间的不透明度从 0 渐变到 1 向左滚动距离，但数学很有趣

标签： jquery scroll jquery-animate opacity

【解决方案1】：

只需更改变量并添加一些数学运算：http://jsfiddle.net/z7E9u/155/

【讨论】：

【解决方案2】：

您当然可以使用mkey answer 之类的简单方法。但是，如果您需要更复杂的东西来“动画”，请尝试jQuery Transe。对于这个问题，这是一个彻底的解决方案。您可以根据当前的滚动偏移量更改几乎任何内容（甚至 CSS3-Transforms 等）。

在你的情况下，试试这样的：

$('#fading').transe({
    direction: 'x',
    start: 3575,
    end: 4150,
    css: 'opacity',
    from: 0,
    to: 1
});

Demo

【讨论】：