淡出圖像，新圖像淡入圖像縮略圖庫頂部

Question

http://jsfiddle.net/nUBmh/2/

我最終希望有一個縮略圖庫-假設我單擊Image1按鈕，它將更改圖像。 然后，我可以將該圖像轉換為DAY或NIGHT，基本上每個按鈕將是2張圖像。 Image2按鈕，更改當前圖像，我可以將其轉換為DAY或NIGHT-以此類推，對於Image3按鈕等。我將jsfiddle代碼用於DAY到NIGHT的轉換，但是我想為更多圖像實現此代碼。

$(document).ready(function(){
var opacityOfNight = 0;
$('.turnNightBtn').click(function(){

    if (opacityOfNight == 1){
        opacityOfNight = 0;
    } else {
        opacityOfNight += 0.05;

        if(opacityOfNight > 1) {
            opacityOfNight = 1;   
        }   
    }

    $('.night_img').css({
        opacity : opacityOfNight 
    });

});


$('.turnDayBtn').click(function(){

    if (opacityOfNight == 1){
        opacityOfNight = 0;
    } else {
        opacityOfNight -= 0.05;

        if(opacityOfNight < 0) {
            opacityOfNight = 0;   
        }   
    }

    $('.night_img').css({
        opacity : opacityOfNight 
    });

});

}）;

Answer 1

您是否只希望淡入/淡出完全完成而不是逐步移動？ 如果是這樣，請將您的jQuery更改為以下內容，它將完成整個淡入/淡出操作，而無需將其分為多個步驟。

$(document).ready(function(){
    $('.turnNightBtn').click(function(){
        $(".night_img").fadeIn("fast",function() {
            $(".day_img").fadeOut()});

    });


    $('.turnDayBtn').click(function(){
        $(".day_img").fadeIn("fast",function() {
            $(".night_img").fadeOut()});

    });
});

Answer 2

您必須使用setInterval

$(document).ready(function(){
    var opacityOfNight = 0;
    var interval;
    $('.turnNightBtn').click(function(){        
        interval = setInterval(turnDark, 500); 
       });

    function turnDark() { 
        $('.night_img').css({
            opacity : opacityOfNight 
        })                               
        opacityOfNight += 0.05;  
        if (opacityOfNight > 1)
             clearInterval(interval);
    }


    $('.turnDayBtn').click(function(){              
        interval = setInterval(turnLight, 500);                               
    });

    function turnLight() { 
        $('.night_img').css({
            opacity : opacityOfNight 
        })                               
        opacityOfNight -= 0.05;  
        if (opacityOfNight < 0)
             clearInterval(interval);
    }

});

小提琴