Jquery Trocar SRC de tags IMG com efeito

Efeito faz uso dos métodos fadeIn() e fadeOut() do jQuery

by Salustiano Silva

HTML

<div class="slider">
    <div class="dest">
        <img src="http://www.imagebrowse.com/wp-content/uploads/2013/08/astonishing-aristic-mobile-background-wallpaper-background.jpg" alt="suites-slider-dest">
    </div>
    <div class="navbar">
        <img src="http://www.imagebrowse.com/wp-content/uploads/2013/08/marvellous-water-drops-background-2013.jpg">
        <img src="http://www.imagebrowse.com/wp-content/uploads/2013/08/marvelous-beautiful-autum-tree-wallpaper-background.jpg">
    </div>
</div>

CSS

img
{
    max-width: 100%;
}

.slider
{
	display: inline-block;
	padding: 75px 0;
}
.dest
{
	border: 5px solid #fff;
	box-shadow: rgba(0,0,0,0.5) 0 0 15px;
	float: left;
	margin-right: 15px;
	width: 70%;
}
.dest img{
    min-width:100%;
    float:left;
}

.navbar
{
	float: left;
    margin-left: 10px;
	width: 17%;
}

.navbar img:first-child
{
	margin-top: 0 !important;
}

.navbar img
{
	border: 5px solid #fff;
	box-shadow: rgba(0,0,0,0.5) 0 0 15px;
	cursor: pointer;
	display: block;
	margin-top: 15px;
	opacity: 0.5;
}

.navbar img:hover
{
	opacity: 1;
}

JavaScript

// pré-carregar imagens
var preloadImages = [];
$('.slider img').each(function() {
    preloadImages.push($(this).attr('src'));
});
$.each(preloadImages, function () {
    $('<img/>').attr('src', this);
});



// Evento click para trocar imagem
$(".navbar img").click(function() {

    var $mini  = $(this),
        $dest  = $(".dest img"),
        oldSrc = $dest.attr('src');

    $dest.fadeOut( "slow", function() {
        $dest.on('load', function() {
            $dest.fadeIn("slow");
        }).attr('src', $mini.attr('src'));
        $mini.attr('src', oldSrc);
    });
});