jQuery queues fadeIn() on scroll

Question

My fadeIn on scroll seems to be triggering every time I scroll which is what I want. But this queues up the animation and ends up running well after the user has stopped scrolling.

I have tried using the .stop(true, true) function but I believe this does not work on a if or else statement.

My code so far:

if($('.icon').isOnScreen()){
    $('.icon').fadeIn("slow");  
} else {
    $('.icon').fadeOut("slow"); 
};

I have tried below but this does not work

if($('.icon').isOnScreen()){
    $('.icon').stop(true,true).fadeIn("slow");  
} else {
    $('.icon').stop(true,true).fadeOut("slow"); 
};

Try calling `$('.icon').fadeIn('slow')` only when `$('.icon')` is not visible yet. This way you can avoid it being called everytime. — Arnelle Balane, Apr 24 '13 at 10:25

score 0 · Answer 1 · answered Apr 24 '13 at 10:19

0

Have u tried his?

var isfadeId;
if($('.icon').isOnScreen()){
   if(!isfadeId) $('.icon').fadeIn("slow");
   isfadeId = true;
} else {
   if(isfadeId) $('.icon').fadeOut("slow"); 
   isfadeId = false;
};

answered Apr 24 '13 at 10:19

Roar

2,027
4
22
34

Although Brent's answer didn't work, kindly check out this two links as this is somewhat a similar question. [link #1](http://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen), [link #2](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) – KevinIsNowOnline Apr 24 '13 at 11:14

score 0 · Accepted Answer · edited Apr 24 '13 at 10:40

0

Worked it out, thanks all

if($('.box').isOnScreen()){
    if($('.icon').isOnScreen()){
        $('.icon').fadeIn("slow");      
    } else {
        $('.icon').fadeOut("slow"); 
    }
} else {
    $('.icon').stop().fadeOut("slow");  
};

edited Apr 24 '13 at 10:40

arulmr

7,806
8
48
67

answered Apr 24 '13 at 10:33

Brent

2,125
9
31
60

jQuery queues fadeIn() on scroll

2 Answers2