11548 sujets

JavaScript, DOM et API Web HTML5

Animer le fond d'un span de droite à gauche avec animate()

Bonjour à tous!

J'ai une grosse galère avec JQuery que je ne maîtrise pas encore très bien. Je veux réaliser un effet de dégradé progressif de droite à gauche sur le background-color de plusieurs span pour réaliser un menu. J'y parviens sans souci en animant de gauche à droite, mais impossible de faire l'inverse. Y'a-t-il un paramètre à renseigner dans animate() pour résoudre ce probleme ?

Ci-dessous mon code HTML :

<!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="fr" lang="fr">
<head>
<title>Test menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <link rel="stylesheet" type="text/css" href="css/styles2.css" />

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

  
  <script type="text/javascript">
  // MENU RIGHT
  $(document).ready(function(){

      $("#menu a .logoRub").hover(
        function () {

  	  $(this).next().animate({ opacity:1, width:"225" }, 150);
  		
        }, 
        function () {
  	  
  		$(this).next().animate({ opacity:0, width:"0" }, 400);
  		
        }
      );	
  	
  });
  </script>

</head>
<body>
<!-- Document -->


   <div id="menu">
    <a href="index.php"><span class="logoRub">Accueil</span><span class="bgMenu"></span></a>
    <a href="creation-site-internet.php"><span class="logoRub">Création de Site Internet</span><span class="bgMenu2"></span></a>
    <a href="affiches-flyers-cartes-de-visite-graphisme-print.php"><span class="logoRub">Affiches, Plaquettes, Flyers</span><span class="bgMenu3"></span></a>
    <a href="logos-identite-visuelle-charte-graphique.php"><span class="logoRub">Logos, Identité Visuelle</span><span class="bgMenu4"></span></a> 
    <a href="realisations-web-print-multimedia.php"><span class="logoRub">Réalisations</span><span class="bgMenu5"></span></a>
    <a href="profil-graphiste-freelance.php"><span class="logoRub">Profil</span><span class="bgMenu6"></span></a> 
    <a href="contact.php"><span class="logoRub">Contact</span><span class="bgMenu7"></span></a>
  </div>
  

</body>
</html>


La feuille de style :
              
body{
  background:#ffffff;
	color:#000000;
	font-family:"Helvetica", Arial, sans-serif;
	font-size:0.90em;
	letter-spacing:1.2px;
	text-align:left;
	margin:0;
	width:100%;
	height: 100%
	}
	    
 
/******** h1, h2 ...  ***********/






/******** links, img, div  ***********/

	
a{
	color:#646464;
	outline:none;
	text-decoration:none;
	}

a:hover{
	color:#ffffff;
	text-decoration:none;
	}

	


div#menu{
	font-family:"Arial";
	font-size:0.40em;
  float: left;
	position:relative;
	top:180px;
	left:200px;
	width:225px;
	}
	
div#menu a{
  cursor: pointer;
	display:block;
	padding:0px;
	margin:0 0 0 0;	
	position:relative;
	width:225px;
	height:22px;
	}



div#menu a span.logoRub{
  cursor: pointer;
	z-index:10;
	position:absolute;
	padding:0 0 0 8px;	
	top:3px;
	left:0px;
	width:225px;
	height:22px;
	font-size:2.2em;
	display:block;

}

div#menu a span.bgMenu{
	cursor: pointer;
  z-index:5;
	position:absolute;
	top:0px;
	left:0px;
	width:0;
	height:22px;
	background-color:#d2e288;
	text-decoration:none;
}

div#menu a span.bgMenu2{
	cursor: pointer;
  z-index:5;
	position:absolute;
	top:0px;
	left:0px;
	width:0;
	height:22px;
	background-color:#ffcb05;
	text-decoration:none; 
}
   
div#menu a span.bgMenu3{
	cursor: pointer;
  z-index:5;
	position:absolute;
	top:0px;
	left:0px;
	width:0;
	height:22px;
	background-color:#f58345;
	text-decoration:none;
}
   
div#menu a span.bgMenu4{
	cursor: pointer;
  z-index:5;
	position:absolute;
	top:0px;
	left:0px;
	width:0;
	height:22px;
	background-color:#ed1651;
	text-decoration:none;
}
   
div#menu a span.bgMenu5{
	cursor: pointer;
  z-index:5;
	position:absolute;
	top:0px;
	left:0px;
	width:0;
	height:22px;
	background-color:#ca7cea;
	text-decoration:none;
}
      
div#menu a span.bgMenu6{
	cursor: pointer;
  z-index:5;
	position:absolute;
	top:0px;
	left:0px;
	width:0;
	height:22px;
	background-color:#1bb7ff;
	text-decoration:none;
}
      
div#menu a span.bgMenu7{
	cursor: pointer;
  z-index:5;
	position:absolute;
	top:0px;
	left:0px;
	width:0;
	height:22px;
	background-color:#3b3b3b;
	text-decoration:none;
}

div#menu a.on
{
	display:block;
	padding:0px;
	margin:0px;	
	text-decoration:none;
}
Pour faire l'effet inverse (c-a-d que l'effet vienne de la droite), il suffit simplement de passer ton span.bgMenu en right:0; au lieu de left:0;

Sinon je te conseille d'ajouter un stop() avant de lancer tes animations :


$("#menu a .logoRub").hover(
   function () {
      $(this).next().stop().animate({ opacity:1, width:"225" }, 150);
   },
   function () {
      $(this).next().stop().animate({ opacity:0, width:"0" }, 400);
   }
);
Sujet clos
Aller à