html - 每次单击按钮时图像都会褪色并且新图像开始显示在第一张图像之上？

Question

我已经搜索了一整天，但找不到任何东西。我正在尝试将图像淡化为与另一图像透明。意思是 - 当我点击一个按钮时，转换开始，但你必须继续点击按钮才能看到第二张图片。示例:2 张相同的图像，但一张是夜间图像，一张是白天图像。我想从白天过渡到夜晚，不是通过将不透明度逐渐变为 0 然后变为 1，而是让它连续点击，然后您会看到过渡。

Answer 1

我想这就是你搜索的内容

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

    });
});

http://jsfiddle.net/nUBmh/