HTML+CSS+JavaScript

сейчас это реализовано так:

function image_control() {
var inspirations = ['img/quickview_340/sneakers.jpg', 'img/quickview_340/sneakers1.jpg', 'img/quickview_340/sneakers2.jpg'];
$('.inspiration_image').bind('click', function(event){
event.preventDefault();
var ins = inspirations[$(this).attr('id')]
//update main quickview image
$("#quickViewMainImage").fadeOut().attr("src", ins).fadeIn();
$("#quickViewMainImage").attr("src", ins);
$("#quickViewMainImage").fadeIn();
});
}


посмотреть работу можно здесь

но адрес картинки меняется еще до срабатывания fadeIn() из-за этого возникает ощущение что картинка дергается и грузится два раза, как этот процесс сделать плавнее и эстетичнее ? без дополнительный плагинов только на jQery.

Может от браузера зависит.
У меня такой эффект в Фоксе
Где посмотреть в действии?

Что вы делаете?

Скрываете картинку - меняете атрибут - показываете картинку
$("#quickViewMainImage").fadeOut().attr("src", ins).fadeIn();

тут же меняете атрибут на тот же самый, причем подгрузка предыдущей картинки не прекратилась
$("#quickViewMainImage").attr("src", ins);

И снова показываете картинку, вот вам и ощущение что картинка грузится два раза и дергается
$("#quickViewMainImage").fadeIn();

Достаточно этого куска кода:

function image_control() {      var inspirations = ['img/quickview_340/sneakers.jpg', 'img/quickview_340/sneakers1.jpg', 'img/quickview_340/sneakers2.jpg'];      $('.inspiration_image').bind('click', function(event){           event.preventDefault();           var ins = inspirations[$(this).attr('id')]          //update main quickview image          $("#quickViewMainImage").fadeOut().attr("src", ins).fadeIn();  });  }