Кроссфейд JQuery без плагина

здесь много всего, что указывает на плагины для кроссфейдов и прочего, но ни один из них не соответствует моим потребностям.

У меня есть 2 штуки на моем страница: A large image, a div containing 3 or four small thumbnails

when a thumbnail is clicked it reads in the src and changes the main images source to the new image.

how do i get it to fade one in while the other fades out ( so it does not go to nothing before fading in the new image)

heres my code:

$('.TnImage').live('click', function() {
        var newImage = $(this).attr('src');
        var oldImage = $('.mainImage').attr('src')
        $('.mainImage').fadeOut('slow');
        $('.mainImage').attr('src', newImage).fadeIn('slow');
    });

Just for clarification why i dont want to use existing plug-ins, is that most require you to know the list of images to be loaded in before hand, the thumbnail images are retrived from a mysql database through php, and i'd rather not have to make 2 lists one for the thumbnails and 1 for the main images then hiding all but the one main div with the image in i want showing.

i have had a look a cycle plugin but i'd prefewr not to use it, I know people keep going on about not reinventing the wheel, but if i keep using plugins to do stuff, i'm never going to learn the nuts and bolts of how jquery works. i used to use the excellent IMAGESWITCH but does not work with jquery 1.4.3, and i need this version for its's html data() and so by relieing on this previously, i am now stuck so why i have asked a way of doing this without using plugins.