My hover menu was working properly with opacity effects, but now i dont know suddenly they are not showing the hovered image. Other animations like movements of texts are working...... I dont know much about Jquery. So seriously stucked here. You can see the website online if you need.
I am also pasting the code here so you can see it better. The animation on spans is not working.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/blockui.js">
</script>
<script type="text/javascript" src="js/easySlider1.7.js">
</script>
<script src="js/prettyPopin.js" type="text/javascript" charset="utf-8">
</script><!-- Let's do the animation -->
<script type="text/javascript">
//<![CDATA[
$(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>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#FFF',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .8,
color: '#FFFFF'
} });
setTimeout($.unblockUI, 1500);
});
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(".bullet li").hover(function(){
$(this).find('span').animate({ opacity: 0 }, 300);
$(this).find('a').animate({paddingLeft:"85px"}, 300);
},function(){
$(this).find('span').animate({ opacity: 1 }, 300);
$(this).find('a').animate({paddingLeft: "70px"}, 300);
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
speed:800,
pause:3000,
prevId: 'prevBtn',
nextId: 'nextBtn',
auto: true,
continuous: true
});
});
//]]>
</script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function(){
$("a[rel^='prettyPopin']:eq(0)").prettyPopin({width: 550,followScroll:false});
$("a[rel^='prettyPopin']:eq(1)").prettyPopin({width: 550,followScroll:false});
$("a[rel^='prettyPopin']:eq(2)").prettyPopin({width: 550,followScroll:false});
});
//]]>
</script><![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="my.css" /><![endif]><!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="myie.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="myie7.css" />
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="appoint">
<ul>
<li>For appointment:
+92-55-3856686<strong>|</strong>3859676<strong>|</strong>3846888</li>
</ul>
</div><!--appoint div close-->
<div id="navi">
<ul id="menu">
<li><a href="#" class="home"></a></li>
<li><a href="#" class="service"></a></li>
<li><a href="#" class="portfolio"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div><!--navigation div close-->
</div><!--header div close-->
and here is the CSS i am using for navigation
/* Menu Body */
ul#menu {
height:39px;
list-style:none;
margin:0;
padding:0;
}
/* Float LI Elements - horizontal display */
ul#menu li {
float:left;
}
/* Link - common attributes */
ul#menu li a {
background:url(images/menu.png) no-repeat scroll top left;
display:block;
height:39px;
position:relative;
}
/* Span (on hover) - common attributes */
ul#menu li a span {
background:url(images/menu.png) no-repeat scroll bottom left;
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}
/* Span (on hover) - display pointer */
ul#menu li a span:hover {
cursor:pointer;
}
/* Specify width and background position attributes specifically for the class: "home" */
ul#menu li a.home {
width:83px;
}
/* Shift background position on hover for the class: "home" */
ul#menu li a.home span {
background-position:0px -39px;
}
/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.service {
width:110px;
background-position:-83px 0px;
}
/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.service span {
background-position:-83px -39px;
}
/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portfolio {
width:104px;
background-position:-193px 0px;
}
/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio span {
background-position:-193px -39px;
}
/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.contact {
width:210px;
background-position:-297px 0px;
}
/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.contact span {
background-position:-297px -39px;
}
Please reply me soon, its urgent