jquery - Image transition on mouse click -

i implementing image gallery whereby if click on image thumbnail shows bigger picture. however, trying make image transitions 1 visible on screen. code have looks :

$('.box8').click(function(){     $('#mymainpicture').animate({         opacity:'toggle'}, 1000, 'linear', function() {              $('#mymainpicture').attr("src", "thmb/pics/7.jpeg");         });     });  $('.box2').click(function(){     $('#mymainpicture').animate({         opacity:'toggle'}, 1000, 'linear', function() {              $('#mymainpicture').attr("src", "thmb/pics/1.jpeg");         });     });  }); 

when click on element .box8 current #mymainpicture picture element nicely disappears dictated value of 'toggle' regardless of presently there on screen. if click again show me picture defined in src attribute.

the same applies .box2 element.

however, there way animate whole sequence unloading of old picture , loading of new 1 happens in single click opposed me having press mouse twice?

many thanks,

vnayak

try split code reusable functions.

function animatetransition($image, newsrc){     $image.animate({        opacity:'toggle'}, 1000, 'linear', function() {           if(newsrc){              $image.attr("src", newsrc);              animatetransition($image,null);           }     }); }; $('.box').on('click',function(){     animatetransition($('#mymainpicture'),'thmb/pics/7.jpeg'); });