Shorten code with multiple if else statements

Question

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")
    }
};

Answer 1

I also had the same issue where I needed the same 'type' of else statements and couldn't (or didn't want to) use the Variable system since the information I am grabbing is coming from a .getJSON statement.

What I actually had to do was just not place in the ELSE statement and just have a recurring IF statement based on the information that was being grabbed. (It's not the same code you were using as I'm still VERY new at this but this seemed the easiest way to repeat the if statement as the else was assumed.)

    var $j = jQuery.noConflict();
    var KBOXUSER = '';
    $j(document) .ready(function () {
        //Get logged in User
        KBOXUSER = $j('*:contains("User: "):last') .text();
        var n1 = KBOXUSER.indexOf('User: ') + 6;
        var n2 = KBOXUSER.indexOf('Organization:');
        KBOXUSER = KBOXUSER.substring(n1, n2);
        $j.getJSON('/common/jkuery.php?id=104&query_type=sqlp&p1=' + KBOXUSER + '', function (data) {
    $j.each(data.json, function(key, val) {
        if (val == 'CSR' || val == 'Executive') {
        $j('select[name=QUEUE_ID] option:[title="Service Desk - A/P"]') .remove();
        };
        if(val == 'Accounting') {
        $j('select[name=QUEUE_ID] option:[title="Service Desk - CSR"]') .remove();
        };
        if(val == 'Embroidery') {
        $j('select[name=QUEUE_ID] option:[title="Service Desk - CSR"]') .remove();
        $j('select[name=QUEUE_ID] option:[title="Service Desk - A/R"]') .remove();
        };
     });

  });
});

Answer 2

All the code seemed identical except selectors. Made an object to iterate over so take care of repetitive tasks. You can use toggleClass to add or remove the class via boolean. I also think your example was missing a comma in the animate syntax.

//Function to activate and deactivate the buttons on the side menu
function navIndicator(){
    var winNow = $(window).scrollTop(),
        posRoi = $('#roi').offset(),
        posRoiNow = posRoi.top,
        // Didn't copy paste all of the buttons here, but you get it ;)
        check = [ $('#homeBut'), $('#roiBut') ];

    $.each( check, function( multiplier, btn ) {

      var match = (winNow == posRoiNow * multiplier ),
          opacity = ( match ) ? 1 : 0;

      btn.find( 'a img.active' )
      .stop()
      .animate({opacity:opacity},{queue:false,duration:300,easing:"easeOutExpo"});

      btn.toggleClass( 'viewing', match );

    });

}