FADE IN-OUT EFFECT ON BACKGROUND IMAGE IN A DIV TAG BY HOVER ON A THUMBNAIL IMAGE OR TEXT

FADE IN-OUT EFFECT ON BACKGROUND IMAGE IN A DIV TAG BY HOVER ON A THUMBNAIL IMAGE OR TEXT


HERE IS MY CODE GUYS
 
CAN U HELP?
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="language" content="en" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript">






 var listBg = new Array();
 listBg[0] = "background-image/MSC-3026-home-revise-RL-1.jpg";
 listBg[1] = "background-image/MSC-3026-home-revise-RL-2.jpg";
 listBg[2] = "background-image/MSC-3026-home-revise-RL-1.jpg";
 listBg[3] = "background-image/MSC-3026-home-revise-RL-2.jpg";


function swapImage(id, i){
 var elem = document.getElementById(id);
 
 elem = elem.style;
 elem.backgroundImage = "url(" + listBg[i] + ")";
 
 // OPACITY OF BUTTON SET TO 100%
$("#bgLayer").css("opacity","1");
  
// ON MOUSE OVER
$("#bgLayer").hover(function () {
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.25
}, "slow");












},
  
// ON MOUSE OUT
function () {
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");   






});

}
function unswapImage(id){
 var elem = document.getElementById(id);
 
 elem = elem.style;
 elem.backgroundImage = "url(background-image/MSC-3026-home-revise-RL-0.jpg)";


}
</script>
<style type = "text/css">
 #ivanTableId, #bgLayer{
 height: 560px;
 width: 1004px;
 }
 #bgLayer{
 background-image: url("background-image/MSC-3026-home-revise-RL-0.jpg");
 }
</style>
</head>
<link href="example_one/styles.css" rel="stylesheet" type="text/css" />
<!-- JavaScripts-->
<script type="text/javascript" src="example_one/js/jquery.js"></script>
<script type="text/javascript" src="example_one/js/custom.js"></script>


<body>
<div id = "bgLayer">
<table id = "ivanTableId">
 <tr>
  <td>&nbsp;</td>
 </tr>
</table>
</div>






<div id="images">
<a href = "" onMouseOver = "swapImage('bgLayer', 0);" onMouseOut = "unswapImage('bgLayer');" >Mouse Over Me Please!</a>
<a href = "" onMouseOver = "swapImage('bgLayer', 1);" onMouseOut = "unswapImage('bgLayer');">Mouse Over Me Please!</a>
<a href = "" onMouseOver = "swapImage('bgLayer', 2);" onMouseOut = "unswapImage('bgLayer');"><img src="example_one/images/01.png" alt="aetuts" width="121" height="83" border="0" class="latest_img" /></a>
<a href = "" onMouseOver = "swapImage('bgLayer', 3);" onMouseOut = "unswapImage('bgLayer');">Mouse Over Me Please!</a>



</div>

</body>
</html>