cross-fade images in jQuery

Question

I have an image on a web page, and have it change when the jQuery slider is moved:

HTML:

Answer 1

here you go, quiet simple I suppose, much less code and difficulty comparing with implementing some plugins: http://jsfiddle.net/gcvqr/2/

HTML

<img src="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png" id="slider">
<button>Change Image</button>

jQuery

var stopWorking=false;
var firstSrc="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png";
var secondSrc="http://technicallyeasy.net/wp-content/uploads/2011/04/apple-logo.jpg";
$('button').click(function(){
    if(!stopWorking){
        stopWorking=true;
    $('body').append('<img src="'+$('#slider').attr('src')+'" id="fadingImg">');
    $('#fadingImg').css({
        'position':'absolute',
        'width':'400px',
        'height':'400px',
        'top':'0px',
        'left':'0px'
    });
        if($('#slider').attr('src')==firstSrc){
            $('#slider').attr('src',secondSrc);
        } 
        else{
            $('#slider').attr('src',firstSrc);
        }
    $('#fadingImg').fadeOut(1000,function(){
        $('#fadingImg').remove();
        stopWorking=false;
    });
    }
});

NOTE:

in order to make it work in your page, you need to give #fadingImg the style of your slider img, to be positioned right over it.