Слайд-шоу с изменением атрибута img src

Question

Я хочу создать простую слайд-шоу, изменив атрибут изображения src (id = imgT).
ultop не видно (display:none)

<img id='imgT' src="top/00.jpg"> 
<ul id="ultop"> 
    <li><img src="top/00.jpg"></li> 
    <li><img src="top/01.jpg"></li> 
    <li><img src="top/02.jpg"></li> 
    <li><img src="top/03.jpg"></li> 
</ul> 

<script> 
n=0; 
x=$('#ultop li').length; 

setInterval(function() { 
    if (n < (x - 1)){n+=1;} 
    else {n=0}; 
    var goimg = $('#ultop li img' + ':eq(' + n +')').attr('src'); 
    $('#imgT').fadeOut(1000, function() { 
    $('#imgT').attr('src', goimg).fadeIn(); 
}); 
}, 7000) 
</script> 

Но есть пустой промежуток между FADEOUT и FadeIn.
Вы можете увидеть живой пример here

Есть ли способ сделать этот процесс гладко без этого пробела.

Answer 1

Попробуйте как этого

$('#imgT').fadeOut(1000, function() { 
    $('#imgT').attr('src', goimg).fadeIn(); 
}); 

Надеется, что это помогает вам