jQuery multiple if else Statements

Posted by Chris MMgr on Stack Overflow See other posts from Stack Overflow or by Chris MMgr
Published on 2013-08-28T01:32:31Z Indexed on 2014/06/11 15:25 UTC
Read the original article Hit count: 167

Filed under:
|

I have a set of images that I am trying to activate (change opacity) based on the position of a user's window. The below code works, but only through a long series of if else statements. Is there a way to shorten the below code?

//Function to activate and deactivate the buttons on the side menu
function navIndicator() {
    var winNow = $(window).scrollTop();
    var posRoi = $('#roi').offset();
    var posRoiNow = posRoi.top;
    //Activate the propper button corresponding to what section the user is viewing
    if (winNow == posRoiNow * 0) {
        $('#homeBut a img.active').stop().animate({
            opacity: 1
        } {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#homeBut').addClass("viewing")
    } else {
        $('#homeBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#homeBut').removeClass("viewing")
    }
    if (winNow == posRoiNow) {
        $('#roiBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#roiBut').addClass("viewing")
    } else {
        $('#roiBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#roiBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 2) {
        $('#dmsBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#dmsBut').addClass("viewing")
    } else {
        $('#dmsBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#dmsBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 3) {
        $('#techBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#techBut').addClass("viewing")
    } else {
        $('#techBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#techBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 4) {
        $('#impBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#impBut').addClass("viewing")
    } else {
        $('#impBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#impBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 5) {
        $('#virBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#virBut').addClass("viewing")
    } else {
        $('#virBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#virBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 6) {
        $('#biBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#biBut').addClass("viewing")
    } else {
        $('#biBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#biBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 7) {
        $('#contBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#contBut').addClass("viewing")
    } else {
        $('#contBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#contBut').removeClass("viewing")
    }
};

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about if-statement