0
Mon menu planificateur fonctionnait correctement avec les effets d'opacité, mais maintenant je ne sais pas soudainement ils ne montrent pas l'image planée. D'autres animations comme des mouvements de textes fonctionnent ...... Je ne sais pas grand chose sur Jquery. Si sérieusement coincé ici. Je colle aussi le code ici pour que vous puissiez mieux le voir. L'animation sur les travées ne fonctionne pas..hover fonction arrêtée d'animer dans les menus jquery
<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-->
et voici le CSS j'utilise pour la 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;
}
S'il vous plaît me répondre bientôt, son urgente
Dans votre menu ul # il n'y a pas de travées. Exactement où sont les travées que vous essayez d'utiliser le code jquery? –