Criei uma pequena galeria de imagens utilizando essa estrutura:
<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>
Com o CSS:
img
{
max-width: 100%;
}
.slider
{
display: inline-block;
padding: 75px 0;
}
.dest img
{
border: 5px solid #fff;
box-shadow: rgba(0,0,0,0.5) 0 0 15px;
float: left;
margin-right: 15px;
width: 70%;
}
.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;
}
E o JQuery:
$(".navbar img").click(function()
{
var dest = $(".dest img").attr('src');
var icon = $(this).attr('src');
$(this).removeAttr('src');
$(this).attr('src', dest);
$(".dest img").removeAttr('src');
$(".dest img").attr('src',icon);
});
O código está funcional mas preciso que a transição da imagem dentro da div com a classe "dest" seja suave. Como posso fazer isso?