Jquery can't trigger second scroll event

Question

I am trying to get $(window).scroll to fire on a second element using .visible(). But if i write it like i have done below or even put them in separate code blocks, which ever one is on top fires and the one underneath doesn't. It seems like window.scroll is still waiting for the first event to happen and ignores the second one?

   //***********************************************************
        // TEST ELEMENTS ARE IN VIEWPORT
        //***********************************************************
        $(window).scroll(function(){
            if ($("#moreSection").visible(true)){
                $(".slideInLeft").delay(400).show("slide", { direction: "right", easing: 'easeOutBounce'}, 400);
            }else if($("#why-use-section").visible(true)) {
                $(".slideInLeft2").delay(400).show("slide", { direction: "right", easing: 'easeOutBounce'}, 1600);
            }

        });

hi , well im using .visible() to test if its in the viewport already. thanks :) — user3358014, Apr 21 '15 at 14:46
By second event, do you mean the #why-use-section element in the 'else if' statement? If you want that to be fired on scroll along with #moreSection, convert the 'else if' to a regular 'if' — Walker Boh, Apr 21 '15 at 14:47
i cant use jsfiddle because its using the jquery.visible.js plugin — user3358014, Apr 21 '15 at 14:48
im using this to test if elements are in the viewport:https://github.com/customd/jquery-visible — user3358014, Apr 21 '15 at 14:52
http://stackoverflow.com/questions/12116505/wait-till-a-function-is-finished-until-running-another-function — Razorphyn, Apr 21 '15 at 14:56

score 0 · Answer 1 · edited May 23 '17 at 11:57

Probably not the right solution, but based on this: Wait till a Function with animations is finished until running another Function

function ScrollOne(){
    if ($("#moreSection").visible(true))
        $(".slideInLeft").delay(400).show("slide", { direction: "right", easing: 'easeOutBounce'}, 400);
}

function ScrollTwo(){
    if($("#why-use-section").visible(true)) {
        $(".slideInLeft2").delay(400).show("slide", { direction: "right", easing: 'easeOutBounce'}, 1600);
}

$(window).scroll(function(){
    ScrollOne().done(ScrollTwo());
});

Jquery can't trigger second scroll event

1 Answers1