Здраствуйте. При верстке сайта я столкнулся с такой проблемой. В шапке используется 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 мало разбираюсь. Знакомого программиста под рукой нет. Помогите пожалуйста решить проблему.