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＆s;原始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);

工作示例：

＆＃13;

$(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
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

浮点数不准确，有关详细信息，请转到floating-point-gui.de。

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

abs(VALUE) - COMPARE < EPSILON

所以你的比较应该是：

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

0.01可接受的错误。这可能更具体，但我不认为这种情况是必要的。

Answer 3

只需使用javascript Math获取一个十进制的不透明度值：

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

Answer 4

你可以这样做：

    $('.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);
            }
        }
    });

Answer 5

你可以做别人说的话，或者因为你只处理两个案例（肯定/否定测试），你可以使用==1和!=1，而不是{{1} }。此外，它是 jQuery ，请确保将==.3与过渡/动画一起使用。

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

为什么＆＃34;（$（this）.css（＆＃39; opacity＆＃39;）==。3）＆＃34;不行？

5 个答案: