11548 sujets

JavaScript, DOM et API Web HTML5

Apparition et estompage de class avec jquery

bonjour,

alors je vais essayé d'être le plus claire possible.
Je suis actuellement en train de me faire un portfolio en ligne mais je rencontre un petit problème au niveau de la galerie.

j'ai crée un sous menu avec les onglets (web, logo, print ect...) avec a coter les listes des clients.
L'effet que je souhait faire est le suivant.

Quand je clique sur le sous menu web, je souhaites que tous les client n'ayant pas la class web
s'estompe sans disparaitre

le soucis est que j'ai des clients qui contiennent plusieurs class .

Le but étant donc de dire quand je clique sur le bouton web :
tous ceux qui possède la class web reste apparent les autres s'estompe.

quand je clique sur le bouton logo :
tous ceux qui possède la class logo reste apparaissent les autres s'estompe.

Voici mon code html :

<div id="barre_bleu">
        
        	<div id="categories">
        		<h2><a href="#" class="cat_web">Web</a></h2>
            	<h2><a href="#" class="cat_logo">Logo</a></h2>
            	<h2><a href="#" class="cat_print">Print</a></h2>
            	<h2><a href="#" class="cat_signaletique">Signalétique</a></h2>
            	<h2><a href="#" class="cat_illustration">Illustration</a></h2>
           	</div>
            
            <div class="client">
            	 <a href="#" class="web logo print illustration">+ Princess Nono</a>
                 <a href="#" class="web logo print">+ Naevus Beauty</a> 
                 <a href="#" class="print">+ Joia Glam Club</a> 
                 <a href="#" class="logo">+ Com1image</a>
                 <a href="#" class="logo">+ Eco Bois Maison</a>
                 <a href="#" class="print">+ Karate club Vitrolles</a>
            </div>
            
            <div class="client">
            	 <a href="#" class="web print">+ xxx</a>
                 <a href="#" class="web signaletique">+ zzzzz</a> 
                 <a href="#" class="print illustration">+ yyyy</a> 
                 <a href="#" class="web">+ Aaaaa</a>
                 <a href="#" class="logo signaletique">+ ggggggg</a>
                 <a href="#" class="print">+ Karate club Vitrolles</a>
                 <a href="#" class="logo">+ Sarl Capparos</a>
            </div>
            
		</div>

Aperçu :

http://i32.servimg.com/u/f32/12/62/03/29/image_10.png

je sais pas si cela peut avoir son importance mais j'ai des animations avec jquery sur ma page

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

$(document).ready(function() {
	$(".accueil").click(function(){
		$("#page_accueil").show(900);
		$("#page_about_us, #page_portfolio").hide(2000);
	});
	
	$(".aboutus").click(function(){
		$("#page_about_us").slideDown(900);
		$("#page_accueil, #page_portfolio").hide(2000);
	});
	
	$(".portfolio").click(function(){
		$("#page_portfolio").show(900);
		$("#page_about_us, #page_accueil").hide(2000);
	});
	
});

</script>

Modifié par trainsrenton (31 Aug 2010 - 15:45)
Salut.

Moi j'ai fais un truc comme ça :
<ul>
  <li class="web">client 1</li>
  <li class="print">client 1</li>
  <li class="web">client 1</li>
  <li class="logo">client 1</li>
</ul>

Par exemple en javascript quand je clique sur le bouton web j'ajoute class="web" à mon <ul> et en css j'ai : 

ul li {color:#fff;} /* couleur par defaut */
ul.web li, ul.print li, ul.logo li {color:#ccc;} /* couleur de tous les li quand un menu est cliqué */
ul.web li.web, ul.print li.print, ul.logo li.logo{color:#fff;} /* couleur des li de la même classe que le ul */


(j'suis partit du principe que "s'estompent" = "se grisent" mais bon même si tu veux les cacher completement c'est le même principe)

Voilà je crois que c'est ce que tu cherchais .. tu peux voir mon site perso' : http://uoa7.free.fr qui utilise ce systeme.
et si mon client a plusieur class j'arrive pas a comprendre la logique de se que tu as fait :s.

Au niveau du script tu mets quoi ?
exactement sa mis a part que je veux pas qu'il disparaisse completement mais juste qu'il se grise.

je vais essayer d'adapté sa merci beaucoup je reviens vers vous pour vous dire se qu'il en est.

et j'aurai surement besoin d'aide pour l'effet d'opacité.

encore merci a bientot
bon alors de l'évolution ! Le tuto que m'as passer cilou sa marche nickel j'ai reussi a bien l'adapter a se que je voulais faire seulement maintenant je galere pour l'opacité.

Car dans le tuto il utilise a un fadeIn et un FadeOut moi je veux juste que l'opaciter changer pas qu'il disparaisse complétement.... se serais trop facile sinon lol

voici le 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creating a Filterable Portfolio with jQuery</title>
<link href="stylesheets/screen.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/framework.js"></script>
<!--[if lt IE 7]>
<link href="stylesheets/screen-ie6.css" type="text/css" rel="stylesheet" media="screen,projection" />
<![endif]-->
</head>

<body>

<div id="container">

	<ul id="categories">
		<li class="current"><a href="#">All</a></li>
		<li><a href="#">Web</a></li>
		<li><a href="#">Print</a></li>
		<li><a href="#">Identité</a></li>
		<li><a href="#">Integration</a></li>
		<li><a href="#">Information Architecture</a></li>
	</ul>

	<ul id="portfolio">
		<li class="cms integration"><a href="#">+ Princess Nono</a></li>
		<li class="integration web"><a href="#">Apple</a></li>
		<li class="web development"><a href="#">CNN</a></li>
		<li class="cms"><a href="#">+ Naevus Beauty</a></li>
		<li class="web cms integration"><a href="#">ESPN</a></li>
		<li class="web integration"><a href="#">+ Facebook</a></li>
		<li class="cms information-architecture"><a href="#">+ Com1image</a></li>
		<li class="integration development"><a href="#">Netflix</a></li>
		<li class="information-architecture"><a href="#">NETTUTS</a></li>
		<li class="web information-architecture cms"><a href="#">+ Maison Eco Bois</a></li>
		<li class="development"><a href="#">ggfdgdfgdfg</a></li>
		<li class="cms web"><a href="#">YouTube</a></li>
	</ul>
</div>

</body>
</html>


CSS :

div#container {
	background-color:#009ee0;
	margin: 20px auto 0; 
	overflow: hidden; 
	width: 1003px;
	padding: 15px;
}

/* CATEGORIES*/

ul#categories {
	width:200px;
	float: left;
	font-size: 12px; 
	list-style: none; 
	margin-left: 0; 
	 
}

ul#categories li { 
	border-right: 1px solid #dedede;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
	padding-bottom:5px;
}

ul#categories a{
	width:100%;
	height:17px;
	background-color:#000;
	display:block; 
	color: #fff; 
	text-decoration: none;
	text-align:center;
	
}


/*ul#categories li:last-child { 
	border-right: none; 
	margin-right: 0; 
	padding-right: 0; 
}*/



ul#categories li.current a, ul#categories a:hover { 
	color: #dedede; 
}

ul#categories li.current a { 
	color: #009ee0; 
	 
}

/*CLIENTS*/

ul#portfolio { 
	float: left; 
	list-style: none; 
	margin-left: 0; 
	width: 803px; 
}

ul#portfolio li {  
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 5px;
	width: 200px;
}

ul#portfolio a { 
	display: block;
	width: auto;
	color:#fff;
	text-decoration:none;
}

ul#portfolio a:hover { 
	text-decoration: none; 
}


JS :
$(document).ready(function() {
	$('ul#categories a').click(function() {
		$(this).css('outline','none');
		$('ul#categories .current').removeClass('current');
		$(this).parent().addClass('current');
		
		var filterVal = $(this).text().toLowerCase().replace(' ','-');
				
		if(filterVal == 'all') {
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		} else {
			
			$('ul#portfolio li').each(function() {
				if(!$(this).hasClass(filterVal)) {
					$(this).fadeOut('normal').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}
		
		return false;
	});
});
Il faut utiliser fadeTo
$(this).fadeTo("slow", 0.2);/*pour estomper*/
$(this).fadeTo("slow", 1);/*pour désestomper (si, si, ça se dit)*/

Modifié par paolo (01 Sep 2010 - 22:46)
sa me fait le même effet g un exemple plus concret de ce que je veux :

http://www.matrixgroup.net/portfolio/

voila quand tu fais une sélection ses icônes ne disparaissent pas ils prennent juste une opacité.

moi il se barre complètement se qui réorganise automatiquement ma liste et on est très vite perdu.
Dans ton CSS, rajouter une class ul#portfolio .hidden{opacity:0.5;filter: alpha(opacity=70);} devrait suffire.

Filter c'est pour IE et opacity pour les autres.
Sujet clos
Aller à