Плавность смены картинки
 

Всем доброго дня.
В общем есть такой простой код

$('#thumbs').delegate('img','click', function(){
       	$('#largeImage').attr('src',$(this).attr('src').replace('small','big'));
    });

этот код при нажатии на маленькую картинку отображает соответствующую ей большую картинку путем подмены адреса.

Вопрос - как сделать чтобы это происходило плавно?

Не хотелось бы использовать какие-то дополнительные сборки.
Хотелось бы как-то это реализовать при помощи fadeIn/fadeOut по возможности.

В общем сделал вот так

$('#thumbs').delegate('img','click', function(){
        $('#largeImage').fadeOut("slow");
       	$('#largeImage').attr('src',$(this).attr('src').replace('small','big')).fadeIn("slow");
    });

Что-то туплю. Он почему-то теперь меняет сперва картинку, а потом ее еще раз плавно отображает

Как убрать эту быструю смену в начале?

Забейте и вкачивайте сразу большие картинки. Они же, я так думаю, у вас условно большие, то есть относительно маленьких, а не на самом деле портянки в 10К?

А с нормальным размером управляется css или самый примитивный код.

Браузеры сейчас соревнуются за качество интерполяции. ФФ так вообще из кожи лезет, как тот Врубель дорисовывает уже когда все выставлено.

misterX_,
3 строка должна стоять во второй в fadeOut формат смотрите в документации

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

misterX_,
потому что смена src мгновенно а анимация растянута во времени ...

kostyanet, ну вопрос ведь еще в объеме трафика, ты не подумал об этом? Или всякие lazy-load делают от нефиг делать?

Вот тут вот все перечитал: http://www.w3schools.com/jquery/jquery_fade.asp
По ходу FadeOut так не умеет :-(