javascript - 淡出图像，新图像在图像缩略图库顶部淡出

Question

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

我最终想要一个缩略图画廊 - 所以说我点击 Image1 按钮，它会改变图像。然后我可以将此图像转换为白天或夜晚，基本上每个按钮将有 2 个图像。 Image2 按钮，更改当前图像，我可以将其转换为白天或夜间 - Image3 按钮等依此类推。我有这个 jsfiddle 代码用于我的白天到晚上的转换，但我想为更多图像实现它。

$(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()});

    });
});