Плавное перетекание картинок в Javascript

[oIo_DeN_oIo]

Есть код спойлера, с меняющейся картинкой, при подведении мышки он разворачивается. Вопрос как сделать что бы картинки плавно сменялись может даже с эффектом, если это не будет большой нагрузкой на комп.


<script type="text/javascript">
my_picture = ['http://tuxpaint.org/stamps/stamps/vehicles/flight/planes/747.png', 'http://www.wi-skyinflight.com/images/airplane_intro.png', 'http://files.softicons.com/download/object-icons/elements-alone-icons-by-babasse/png/256/Plane.png']
jQuery(document).ready(function(){
jQuery('.splLink').parent().hover(function(){
jQuery(this).children('div.splCont').toggle('normal');
},
function(){
jQuery(this).children('div.splCont').toggle('normal');
});
});
setInterval(function() {
jQuery('#random_pic img').attr('src', my_picture[Math.floor(Math.random() *my_picture.length ) + 1] );
}, 2000);
</script>

<style>
.spll div .splCont {
height:auto;
width:300px;
background-color: #CECECE;
z-index:1000;
margin-top:2px;
border:1px dotted #000;
font-size:14px;
font-weight: bold;
font-family:Comic Sans MS;
padding:5px;
}
</style>

<table>
<tr>

<td><div class="spll"><DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2" id="random_pic"><img src="http://s004.radikal.ru/i207/1310/80/3fda9f378d8e.png"></div><DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">

Action 1. Bad boys and girls <br/>
Action 2. Golden girls and boys <br/>
Action 3. Party People <br/>
Action 4. Cheerleader <br/>
Action 5. Beautiful and clever <br/>
Action 6. Themselves <br/>
Action 7. Teachers <br/>
Action 8. We need you <br/>
Action 9. Welcome

</DIV></DIV>
</div></td>


</tr>
</table>