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

});

<强> FIDDLE

淡出图像，新图像淡出图像缩略图库

2 个答案: