将淡入淡出过渡添加到OnClick缩略图

Question

我对这一切都很陌生，尤其是Javascript。到目前为止，这是奇迹。我想添加一个过渡到OnClick，以便它更平滑，但我不知道最好的方法是结合现有的Javascript这样做。这是我的第一个网站，我担心我的游泳太深了！感谢愿意提供帮助的任何人。

<div id="menuImage" class="grid_5" >
    <img src="img/big/baguette-2.jpg" alt="baguette" height="503px" width="405">
</div>

<div id="menuCaption" class="grid_6 omega">

  <h1 id="menuHeader">Menu</h1>

  <p id="menuParagraph">Seasonal delights like Hot Cross Buns and Real Dresden Stollen            
 are available for the holidays while other delicious specialities rotate weekly. </p>

  <div id="specialOrder" class="grid_6 omega">
     <h3><a href="contact.html">Special Orders</a></h3>
  </div>

</div>

<div id="thumbnail" class="grid_6 omega">

    <img src="img/thumbnails/baguette.jpg" alt="Rollover image" height="80"
    onClick="switchImage(1, 'img/big/baguette-2.jpg')">

    <img src="img/thumbnails/caraway.jpg" alt="Rollover image" height="80"
    onClick="switchImage(2, 'img/big/caraway-2.jpg')">

    <img src="img/thumbnails/olive.jpg" alt="Rollover image"  height="80"
    onClick="switchImage(3, 'img/big/olive-2.jpg')">

    <img src="img/thumbnails/pita.jpg" alt="Rollover image" height="80"
    onClick="switchImage(4, 'img/big/pita-2.jpg')"> 

    <img src="img/thumbnails/pumpernickel.jpg" alt="Rollover image" height="80"
    onClick="switchImage(5, 'img/big/pumpernickel-2.jpg')">

    <img src="img/thumbnails/seeded.jpg" alt="Rollover image" height="80"
    onClick="switchImage(6, 'img/big/seeded-2.jpg')">

            <img src="img/thumbnails/rosemary.jpg" alt="Rollover image" height="80"
    onClick="switchImage(7, 'img/big/rosemary-3.jpg')">
</div>


</div>

<div id="social-media" class="grid_12">
<a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook2-32.png"  
alt="Facebook"></a>
        <a href="https://twitter.com/#!/smellslikebakin"><img  
src="img/pinterest2-32.png" alt="Pintrest"></a>
      <a href="https://twitter.com/#!/smellslikebakin"><img src="img/twitterbird2-
32.png" alt="Twitter"></a>
    </div>


<div id="copyright" class="grid_12">

  <p>&copy; 2013 Wildpatch Bread. All Rights Reserved.</p>
</div>
</div>

<script type="text/javascript">

function switchImage(caption, menuImageToShow) {

    var header = '';
    var paragraph = '';
    switch(caption)
    {
        case 1:
        header = "Baguette";
          paragraph = "The Wildpatch baguette embodies the perfect combination of a  
perfectly crips crust and a moist, chewy inside. Use of rye leaven ensures that our 
baguettes stay fresh for longer than a day... though they usually don’t last that long 
anyway!";
        break;
        case 2:
        header = "Caraway Rye";
        paragraph = "Indulge in the best Ruben you’ve ever had with an all time 
Wildpatch favourite. Using an old family recipe, our Caraway Rye has a strong yet not  
overpowering rye flavour enhanced by yummy caraway seeds.";
        break;
        case 3:
        header = "Olive Ciabatta";
        paragraph = "This Wildpatch classic is packed full of organic kalamata olives 
with a dash of rosemary. The perfect merriment of savory deliciousness, a crisp crust 
and a light and doughy inside, the Olive Ciabatta loaf can be a meal on its own.";
        break; 
    case 4:
        header = "Pita";
        paragraph = "Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam 
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
dolore.";
        break;
    case 5:
        header = "Pumpernickel";
        paragraph = "Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et  
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis 
dolore te feugait nulla facilisi.";
        break;
    case 6:
        header = "Harvest Grain";
        paragraph = "Made with rye leaven, sprouted rye and barley, sunflower seeds, 
honey and blackstrap molasses, Harvest Grain is an slightly sweet, earthy delight. It 
will quickly become a staple for toast, sandwiches or a hearty snack.";
        break;   
    case 7:
        header = "Rosemary";
        paragraph = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi  
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo.";
        break; 

    default:
        header = 'Menu';
        paragraph = 'Seasonal delights like <a href="#">Hot Cross Buns</a> and <a 
href="#">Real Dresden Stollen</a> are available for the holidays while other delicious 
specialities rotate weekly. Something, something. ';
    }

    document.getElementById('menuImage').innerHTML = '<img src="' + menuImageToShow + '" 
/>';
    document.getElementById('menuHeader').innerHTML = header;
    document.getElementById('menuParagraph').innerHTML = paragraph;
}



</script>
</body>
</html>