Fading image each time I click a button and new image is starting to show on top of first image?

Question

I've search ALL day and couldn't find anything. I'm trying to fade an image to be transparent with another image. Meaning - when I click a button the transition starts but you have to keep clicking the button to see the 2nd image. Example: 2 of the same images but one is night image and one is a day image. I want to transition day to night, not by fading the opacity to 0 and then 1, but to have it clicked continuously and you see the transition.

Answer 1

I think here is what you have searched for

$(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/

Answer 2

I put together a basic example that you can use as a basis to get to your goal. I've layered one image over top of the other and then set up a jQuery function to lower the opacity of the top image by 25% per click. You can adjust the class names and values to match your HTML and desired fade amount per click. Hopefully this helps.

$(function(){
    var imageOpacity = 1;
    $('button').click(function(){
        if(imageOpacity > 0){
            imageOpacity = imageOpacity - .25;
            $('.image2').css('opacity', imageOpacity);
        }
    });
});

JSFiddle Example - http://jsfiddle.net/tM9P7/