Javascript-форум - Проблема при использовании 2 эффектов одновременно

Здраствуйте. При верстке сайта я столкнулся с такой проблемой. В шапке используется 2 эффекта на jqury: сам банер анимирован и меню с эффектом подсветки.
По отдельности (меню отдельно от банера) все отлично работает. А вот вместе не хотят.
Пример правильной работы меню: http://www.promosite-design.ru/work/wow/index.html
Пример правильной работы банера: http://www.promosite-design.ru/work/wow/index2.html

Исходный код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Бесплатный русский сервер WoW.</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" language="Javascript" src="js/jquery.jparallax.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){
 
	jQuery('#parallax').jparallax();

 $(function() {
        $('#gallery a').lightBox();
    });
});

</script>

<script type="text/javascript">

$(document).ready(function() {

	$("ul#menu li a").wrapInner("<span></span>");
	$("ul#menu li a span").css({"opacity" : 0});

	$("ul#menu li a").hover(function(){
	
		$(this).children("span").animate({"opacity" : 1}, 400);
	
	}, function(){
	
		$(this).children("span").animate({"opacity" : 0}, 400);
	
	});
	
});
</script>

<script src="jquery-1.2.2.pack.js" type="text/javascript"></script>

<!-- Let's do the animation -->
<script type="text/javascript">
	$(function() {
		// set opacity to nill on page load
		$("ul#menu span").css("opacity","0");
		// on mouse over
		$("ul#menu span").hover(function () {
			// animate opacity to full
			$(this).stop().animate({
				opacity: 1
			}, 'slow');
		},
		// on mouse out
		function () {
			// animate opacity to nill
			$(this).stop().animate({
				opacity: 0
			}, 'slow');
		});
	});
</script>

</head>
<body>
<div id="top">  
	<div id="head">
     <div id="parallax">
     <img src="img/head4.png" alt="" style="width:800px; height:555px;"/>
     <img src="img/head3.png" alt="" style="width:950px; height:555px;"/>
     <img src="img/head2.png" alt="" style="width:900px; height:555px;"/>
     <img src="img/head1.png" alt="" style="width:800px; height:555px;"/>
     </div>
     
<ul id="menu">
    	<li><a href="#" class="home"><span></span></a></li>
        <li><a href="#" class="acc"><span></span></a></li>
        <li><a href="#" class="forum"><span></span></a></li>
        <li><a href="#" class="files"><span></span></a></li>
        <li><a href="#" class="top"><span></span></a></li>
        <li><a href="#" class="about"><span></span></a></li>
</ul>
  
	</div>
</div>
</body>
</html>

когда из этого кода удоляю строку 44

<script src="jquery-1.2.2.pack.js" type="text/javascript"></script>

начинает работать банер.
Я понимаю что проблема в использовании одновременно разных версий jquery, но в Java мало разбираюсь. Знакомого программиста под рукой нет. Помогите пожалуйста решить проблему.