为什么“（$（this）.css（'opacity'）==.3）”不起作用？

Question

我正在尝试在 jquery 中创建一个 if 语句来检查不透明度是否为 .3，但它没有 工作。

if ($(this).css('opacity')==.3) {$(this).fadeTo(500,1);}

我是否错误地格式化了不透明度？我也尝试了0.3 无济于事。

背景：

我正在使用淡入淡出效果，当您滚动经过对象时它会淡入，而当您向上滚动时它会淡出。

myfunkyside 在这里向我展示了如何做到这一点：Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window

myfunkyside 的原创 jsfiddle：http://jsfiddle.net/b7qnrsrz/1/

在这种情况下，淡入淡出从 0 不透明度变为 1 并返回。我想从 .3 到 1 再返回。

我尝试替换

if (objectBottom < windowBottom) {
    if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
    if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);}
}

与

if (objectBottom < windowBottom) {
    if ($(this).css('opacity')==.3) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
    if ($(this).css('opacity')==1) {$(this).fadeTo(500,.3);}
}

但它不起作用。这是我对 jsfiddle 的尝试：http://jsfiddle.net/b7qnrsrz/3/

感谢您查看此内容！

Answer 1

问题在于 JavaScript 中的浮点数并不总是严格意义上的 .3 或 .5，一些其他数字也会添加到末尾。试着把第一个条件放在最上面，如果它是假的，就跳到另一个，因为理论上，你不应该有其他状态。

我还建议将 $(this) 分配给一个变量，以防止 jQuery 不得不创建相同元素的实例 3 次。

var $this = $(this),
    opacity = $this.css('opacity');
if (objectBottom < windowBottom){
    if (opacity != 1) $this.stop().fadeTo(500,1);
}
else if (opacity == 1) $this.stop().fadeTo(500,.3);

我还添加了.stop()，因为如果有人出于某种原因快速上下滚动，元素上的动画队列可能会填满并由于所有淡入淡出的动画仍在队列中而导致脉冲效果。 Stop 通过清除队列中的动画来防止这种情况发生，从而立即执行以下动画。

还有，这个

$(window).scroll(function() {fade();});

可以缩短为

$(window).scroll(fade);

工作示例：

$(window).on("load",function() {
    function fade() {
        $('.fade').each(function() {
            var objectBottom = $(this).offset().top + $(this).outerHeight(),
                windowBottom = $(window).scrollTop() + $(window).innerHeight(),
                $this = $(this),
                opacity = $this.css('opacity');
            
            if (objectBottom < windowBottom){
                if (opacity != 1) $this.fadeTo(500,1);
            }
            else if (opacity == 1) $this.fadeTo(500,.3);
        });
    }
    fade();
    $(window).scroll(fade); //Fade in elements during scroll
});

.fade {
    margin: 50px;
    padding: 50px;
    background-color: lightgreen;
    opacity: .3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <div class="fade">Fade In 01</div>
    <div class="fade">Fade In 02</div>
    <div class="fade">Fade In 03</div>
    <div class="fade">Fade In 04</div>
    <div class="fade">Fade In 05</div>
    <div class="fade">Fade In 06</div>
    <div class="fade">Fade In 07</div>
    <div class="fade">Fade In 08</div>
    <div class="fade">Fade In 09</div>
    <div class="fade">Fade In 10</div>
</div>

Answer 2

只需使用 javascript Math 即可获得一位小数的不透明度值：

if (Math.round($(this).css('opacity') * 10) / 10 == .3) {
  $(this).fadeTo(500,1);
}

Answer 3

浮点数可能不精确，如需了解更多信息，请转至floating-point-gui.de。

您需要做的是使用“epsilon”：您的期望值和实际值之间可接受的差异范围。

abs(VALUE) - COMPARE < EPSILON

所以你的比较应该是：

Math.abs($(this).css('opacity')) - .3 < 0.01

对于 0.01 可接受的错误。这可能更具体，但我认为这种情况下没有必要。

Answer 4

您可以按照其他人所说的去做，或者由于您只处理两种情况（阳性/阴性测试），您可以使用==1 和!=1，而不是==.3。另外，它是 jQuery，请确保使用 .stop() 与过渡/动画。

http://jsfiddle.net/b7qnrsrz/16/

Answer 5

你可以这样做：

    $('.fade').each(function () {
        /* Check the location of each desired element */
        var objectBottom = $(this).offset().top + $(this).outerHeight();
        var windowBottom = $(window).scrollTop() + $(window).innerHeight();

        var opacityPercentage = parseInt($(this).css("opacity") * 100);
        /* If the object is completely visible in the window, fade it in */
        if (objectBottom < windowBottom) { //object comes into view (scrolling down)
            if (opacityPercentage == 30) {
                $(this).fadeTo(500, 1);
            }
        } else { //object goes out of view (scrolling up)
            if (opacityPercentage == 100) {
                $(this).fadeTo(500, 0.3);
            }
        }
    });