11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Modification du css avec Jquery

Salut à tout ...

J'ai un menu composé d'un bouton (une image de 100px de haut). Lorsqu'on n'y touche pas, le bouton a une hauteur (css) de 50px.

Lorsqu'on le survole, j'aimerais qu'il prenne une hauteur de 100px... Cela donnerait l'effet de "tirer" sur l'onglet ...
Je sais faire cet effet en CSS : 

li{
	background-image:url(kimages/btn1.png);
	height:50px;
	width:150px;
	list-style:none;
	display:block;
	
}
li:hover{
	display:block;
	position:relative;
	top:-50px;
	height:100px;
}


Mais j'aimerais traiter cela avec Jquery pour donner un effet de slideUp ...

J'ai donc commencé mon petit script :

$(document).ready(function(){
	$(function(){
		$("li").mouseOver(funtion(){
			$(this).animate({top:"-50px",height:"100px"});
		});
	})
});


Mais cela ne donne aucun résultat, le bouton ne bouge pas d'un poil ... J'ai regardé la docu et je fais comme il est indiqué donc, il y a surement quelque chose qui me surpasse et que vous verrez ...

Merci du coup de main !
Modifié par kisscool (22 May 2012 - 20:48)
Bonjour,
essayes ceci

$(function(){
		$("li").mouseover(funtion(){
			$(this).animate({top:"-50px",height:"100px"});
		});
	})


je crois que le mouseover doit être tout en minuscule...
et puis as tu gardé ce css ?

li:hover{
	display:block;
	position:relative;
	top:-50px;
	height:100px;
}


situ l'as gardé, il faut le transformer en :

li:hover{
	display:block;
	position:relative;
}
Je te remercie pour ton coup de main mais ça ne change rien ...

Je poste tout mon html et tout mon css au cas où :


#contenu {
	width:900px;
	height:800px;
	background-color:green;

}
#menu{
	width:900px;
	height:50px;
	margin-top:100px;
	
	
}

li{
	background-image:url(kimages/btn1.png);
	height:50px;
	width:150px;
	list-style:none;
	display:block;
}
li:hover{
	display:block;
	position:relative;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="menu">
		<ul>
			<li></li>
		</ul>
	</div>
	<div id="contenu">test
	</div>
<script type="text/javascript">
$(document).ready(function(){
	$(function(){
		$(function(){
		$("li").mouseover(funtion(){
			$(this).animate({top:"-50px",height:"100px"});
		});
	})
	})
});
</script>
</body>
</html>
c'est normal qu'il y ait autant d'imbrications ? de $(function(){});

$(document).ready(function(){
	$(function(){
		$(function(){
		$("li").mouseover(funtion(){
			$(this).animate({top:"-50px",height:"100px"});
		});
	})
	})
});

je crois que : 


$(document).ready(function(){
	
		$("li").mouseover(funtion(){
			$(this).animate({top:"-50px",height:"100px"});
		});
	
});

est suffisant ... J'espère que c'est de là que venait ton problème ?
Malheureusement pas...

Et non, toutes ces imbrications n'étaient pas nécessaire... J'ai mis une mauvaise version de mon code JS ...

La bonne ressemblait à celle que vous m'avez proposée !
Il manque juste un c dans la dernière imbrication de function
$(document).ready(function(){
	$(function(){
		$(function(){
		$("li").mouseover(function(){
			$(this).animate({top:"-50px",height:"100px"});
		});
	})
	})
});
Nickel, là ça marche ! Par contre, ça marche une seule fois (un effet de slideUp) puis après, ça fait comme si c'était codé en CSS ...
Faut coder le mouseout :

	$(function(){
	$("li").mouseout(function(){
		$(this).animate({top:"XXXpx",height:"150px"});
	});
})
Sujet clos
Aller à