2

ユーザーのウィンドウの位置に基づいてアクティブ化 (不透明度の変更) しようとしている一連の画像があります。以下のコードは機能しますが、長い一連の if else ステートメントを介してのみ機能します。以下のコードを短くする方法はありますか?

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

2 に答える 2

3

セレクターを除いて、すべてのコードは同じように見えました。反復するオブジェクトを作成したため、反復タスクに注意してください。toggleClassブール値を介してクラスを追加または削除するために使用できます。また、あなたの例にはanimate構文にコンマが欠けていたと思います。

//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 );

    });

}
于 2013-08-28T02:21:56.013 に答える