CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zack Reid
Zack Reid

Reputation: 127

.fadeTo is not fading in slowly

I have been trying to add in a .fadeTo on a div and finally got it to work

I have this:

<section class= "hue innerS1" id="hue" >
    <p class="huep innerS1">BRILLIANT-HUED</p>

    <script>
        $(window).scroll(function () {
            $('[class^="hue"]').each(function () {
                if (($(this).offset().top - $(window).scrollTop()) < 150) {
                    $(this).stop().fadeTo('slow', 1);
                } else {
                    $(this).stop().fadeTo('slow', 0);
                }
            });
        });
    </script>

</section>

But when I scroll to the div it appears in milliseconds not to what it has been set to. When I scroll up back past the div .fadeTo works then.

I cant see whats wrong as both lines of code are the same so it should work, no?

Edit

Here is the jsFiddle

But as you can see it works in on this I might need to update the jquery that I am using. It acting a bit funny though

Upvotes: 3

Views: 117

Answers (1)

V&#225;clav
V&#225;clav

Reputation: 527

Solution may be in using of number instead word.

So, instead word slow use any number (the higher number, more time it takes - here it is, for example 800 - but number may be different as you need). It will allow you to set exactly how long it will do.

$(window).scroll(function () {
        $('[class^="hue"]').each(function () {
            if (($(this).offset().top - $(window).scrollTop()) < 150) {
                $(this).stop().fadeTo(800, 1);
            } else {
                $(this).stop().fadeTo(800, 0);
            }
        });
    });

Upvotes: 2

Related Questions