Animation Div pour panneau glissant
Bonjour la communauté,
je suis en train de créer un site internet à l'aide de la bibliothèque bootsrap & jQuery et je rencontre un problème pour une animation.
J'ai donc deux Div/colonnes sur ma page : une fine a gauche qui contient le descriptif de la page et une deuxieme avec le contenu en lui même (txt + photos).
En utilisant Jquery, j'ai codé un boutton qui permet de fermer le panneau a gauche (première Div) et de le réouvrir.
Je souhaiterais plutôt que le panneau se cache d'un coup, avoir une transition "smooth" où le panneau glisserais vers la gauche et la deuxième div qui s'agrandit pour finalement occupé l'espace des 2 divs.
Je vous met en copie mes avancées. Il ne manque que l'effet de transition (glisse vers la gauche) mais je sens que mon code est plus un bricolage qu'autre chose :aie:
http://jsfiddle.net/pUeue/2941/
HTML
Code:
1
2
3
4
5
6
7
| <div class="col-2 panneau">panneau
</div>
<div class="col-8 contenu">
contenu
</div>
<input type="button" class="button" value="try"></input>
<input type="button" class="button2 hidden" value="try"></input> |
CSS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| .panneau{
width:50px;
height:300px;
background-color:red;
float:left;
}
.col-10{
width:250px;
height:300px;
background-color:yellow;
float:left;
}
.contenu{
background-color:green;
float:left;
}
.col-8{
width:200px;
height:300px;
}
.button{
border: solid 1px black;
}
.hidden {
display:none;
} |
JAVA
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| $('.button').click( function() {
$('.panneau').toggleClass('hidden');
$('.contenu').removeClass('col-8');
$('.contenu').addClass('col-10');
$('.button2').removeClass('hidden');
$(this).addClass('hidden');
});
$('.button2').click( function() {
$('.panneau').toggleClass('hidden');
$('.contenu').removeClass('col-10');
$('.contenu').addClass('col-8');
$(this).addClass('hidden');
$('.button').removeClass('hidden');
}); |
Alors si un de vous aurais l'amabilité de me dire ce qu'il en pense et aurai une potentielle réponse à mes questions, je suis perméable au savoir ! :pastaper:
Merci d'avance !
