Bonjour,
Alors j'aimerais créer un programme avec la Bibliothéque JQuery pour mon Portfolio. J'ai des blocks les uns à coté des autres avec une propriété float, ce qui forme un tableau. Je veux que quand l'utilisateur passe sa souris sur un block, il s'agrandisse, puis une fois la souris retiré le block reprenne sa forme initiale. J'ai commencé à faire le programme. Il marche plus ou moins grâce à des bidouilles. Le truc c'est que l'étirement ne marche qu'une fois, après il ne veut plus recommencer
Mon HTML
<style type="text/css">
et voila mon JS
<script type="text/javascript">
Je pense que mon code n'est vraiment pas fait dans les régles de l'art, donc des conseilles sont vraiment la bienvenue
Alors j'aimerais créer un programme avec la Bibliothéque JQuery pour mon Portfolio. J'ai des blocks les uns à coté des autres avec une propriété float, ce qui forme un tableau. Je veux que quand l'utilisateur passe sa souris sur un block, il s'agrandisse, puis une fois la souris retiré le block reprenne sa forme initiale. J'ai commencé à faire le programme. Il marche plus ou moins grâce à des bidouilles. Le truc c'est que l'étirement ne marche qu'une fois, après il ne veut plus recommencer
Mon HTML
<style type="text/css">
.tout
{
width:750px;
}
.conteneu
{
width:330px;
height:330px;
float:left;
overflow: hidden;
list-style:none;
margin-left:-45px;
position: relative;
margin-top: -5px;
font-size: 50px;
}
li{
width:150px;
height:150px;
margin: 5px;
background-color: #DEE;
float:left;
overflow: hidden;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=5);
z-index:1;
}
</style>
</head>
<body>
<div class="tout">
<ul>
<ul class="conteneu">
<li >1<img src="b.png"></li>
<li>2<img src="b.png"></li>
<li>3<img src="b.png"></li>
<li>4<img src="b.png"></li>
</ul>
<ul class="conteneu">
<li>5<img src="b.png"></li>
<li>6<img src="b.png"></li>
<li>7<img src="b.png"></li>
<li>8<img src="b.png"></li>
</ul>
<ul class="conteneu">
<li>9<img src="b.png"></li>
<li>10<img src="b.png"></li>
<li>11<img src="b.png"></li>
<li>12<img src="b.png"></li>
</ul>
<ul class="conteneu">
<li>13<img src="b.png"></li>
<li>14<img src="b.png"></li>
<li>15<img src="b.png"></li>
<li>16<img src="b.png"></li>
</ul>
<ul class="conteneu">
<li>17<img src="b.png"></li>
<li>18<img src="b.png"></li>
<li>19<img src="b.png"></li>
<li>20<img src="b.png"></li>
</ul>
</ul>
</div>et voila mon JS
<script type="text/javascript">
$('li').hover(function(){
$(this).css("position", "absolute");
$(this).animate({
width : '310px'
,height:'310px'
,opacity:1,
top:0,
}
,{
duration : 2000
, easing : 'swing'
, queue : true
}
);
},function(){
$(this).animate({
width : '150px'
,height:'150px'
,opacity:0.5
}
,{
duration : 1000
, easing : 'linear'
, queue : true
}
).queue(function()
{
$(this).css("position", "relative")
}
)
});
</script>Je pense que mon code n'est vraiment pas fait dans les régles de l'art, donc des conseilles sont vraiment la bienvenue