Your problem is that both slides are changing opacity at the same time and there comes a brief moment when you can see through both of them, hence the body background becomes visible.
Try changing
$("#slider div.bgfade").first().appendTo('#slider').fadeOut(500);
$("#slider div").first().fadeIn(500);
part with this part
var fadeout = $("#slider div.bgfade").first().appendTo('#slider');
$("#slider div").first().fadeIn(500, function(){
fadeout.fadeOut(500);
});
It will fade in the next slide before fading out the current slide so the next slide will be already visible underneath the current fading slide and you'll see next slide instead of body background.
update (mostly changed code to make buttons function)
JS
$(window).load(function () {
//just caching selector results
var slider = $('#slider'),
slides = $('.bgfade', slider),
btnsCntnr = $('#sliderbuttons'),
set;
//assign each slide an id, and for each slide, insert a button for switching to it.
slides.each(function (i) {
var slideid = 'slide' + i;
$(this).attr('id', slideid);
//dynamically create "switch to Slide N" button
btnsCntnr.append($('<span />', {
id: slideid + 'btn',
'class': 'sliderbtn',
'data-slide': slideid /*id of the slide this button switches to*/
}).html('Slide ' + (i + 1)));
});
//fix for "why do it start with the second image (the orange one)?"
slides.hide().first().show();
function anim(slideid) {
var first = $('.bgfade', slider).first();
if (first.attr('id') == slideid) {
//slide is currently visible, so no transition required
loopAnim();
return;
}
//next slide is the slide with specified slideid, otherwise 2nd slide (the one after the visible one)
var next = typeof slideid === 'undefined' ? $(".bgfade:nth-child(2)", slider) : $('#' + slideid, slider),
//current slide is all slides before next slide
current = next.prevAll().appendTo(slider);
next.stop().fadeIn(500, function () {
//only fadeout visible slides
current.filter(function () {
return $(this).is(':visible');
}).stop().fadeOut(500);
});
//set next transition
loopAnim();
}
function loopAnim() {
set = window.setTimeout(anim, 5000);
}
function stopAnim() {
window.clearTimeout(set);
}
function switchSlide(slideid) {
stopAnim();
anim(slideid);
}
$('.sliderbtn').click(function () {
switchSlide($(this).data('slide'));
});
//start slider
loopAnim();
});
HTML
<div id="sliderbuttons"></div>
<div id="slider">
<div class="bgfade" style="background: url(large11.jpg);"></div>
<div class="bgfade" style="background: url(large12.jpg);"></div>
<div class="bgfade" style="background: url(large13.jpg);"></div>
</div>