Bouges ton forum avec jQuery et TFA !
  Portes, panneaux, qui glissent dans tous les sens
Vers le bas ☟
Vers le haut ☝


$(function() {
$('.bloc-tfa').hover(function(){ $(this).find('img').animate({top:'120px'},{queue:false,duration:500}); }, function(){ $(this).find('img').animate({top:'0px'},{queue:false,duration:500}); });


$(function() {
$('.bloc-tfa').hover(function(){ $(this).find('.bas').animate({top:'-120px'},{queue:false,duration:500}); }, function(){ $(this).find('.bas').animate({top:'0px'},{queue:false,duration:500}); });

Vers la droite ☞
Vers la gauche ☜


$(function()
$('.bloc-tfa_p').hover(function(){ $(this).find('.img_2').animate({left:'250px'},{queue:false,duration:500}); }, function(){ $(this).find('.img_2').animate({left:'0px'},{queue:false,duration:500}); });


$(function() {
$('.bloc-tfa_p').hover(function(){ $(this).find('.img_3').animate({left:'-250px'},{queue:false,duration:500}); }, function(){ $(this).find('.img_3').animate({left:'0px'},{queue:false,duration:500}); });

La structure HTML :

<div class="bloc-tfa">
    <img src="ADRESSE DE L IMAGE" alt="" />
    <p> 
       ICI LE CONTENU
    </p> 
</div>

Le CSS :

.bloc-tfa {      
     background: #b5c9d9;
     position: relative;
     overflow: hidden;	
     height: 120px;			
     width: 250px;
     margin: 0;
     padding: 0;
     border: 1px solid #7da2bc;	
}
.bloc-tfa  p{
     display: block;
     color: #00305c;			
     height: 120px;
     width: 250px;
     margin: 0;			
     padding: 0;				
}			
.bloc-tfa img{			
     position: absolute;			
     top: 0;			
     left: 0;					
}

► !important ! Le bloc conteneur doit être en position "relative", l'image, bloc, ou autre élément à bouger, doit être en position "absolute".
Il sera automatiquement positionné en haut et à gauche de son conteneur.

Exemple avec une liste cliquable :



Une liste pour une navigation :


En rajoutant le plugin Easing :

► Vous pouvez télécharger ce plugin ici : Plugin EASING
Vous trouverez sur ce même site, tous les renseignements qu'il vous faut à propos de ce plugin
Ou récupérer le mien : CLIC

$(function() {
$('.bloc-tfa').hover(function(){ $(this).find('#eas').animate({top:'120px'},{easing:'easeOutBounce',queue:false,duration:500}); }, function(){ $(this).find('#eas').animate({top:'0px'},{easing:'easeOutBounce',queue:false,duration:500}); });

$(function() {
$('.bloc-tfa').hover(function(){ $(this).find('#eas2').animate({top:'-120px'},{easing:'easeOutBounce',queue:false,duration:500}); }, function(){ $(this).find('#eas2').animate({top:'0px'},{easing:'easeOutBounce',queue:false,duration:500}); });

Et pourquoi pas des doubles portes ?

► Le principe reste le même, sauf qu'on agit sur deux images ou div, chaque porte à sa propre configuration.



$('#porte_double').hover(function(){ $(this).find('#porte_gauche').animate({left:'-272px'},{queue:false,duration:500}); }, function(){ $(this).find('#porte_gauche').animate({left:'0px'},{queue:false,duration:500}); }); $('#porte_double').hover(function(){ $(this).find('#porte_droite').animate({left:'544px'},{queue:false,duration:500}); }, function(){ $(this).find('#porte_droite').animate({left:'272px'},{queue:false,duration:500}); });

En rajoutant le plugin Easing :

$('#porte_double2').hover(function(){ $(this).find('#porte_gauche').animate({left:'-272px'},{easing: 'easeOutBounce',queue:false,duration:500}); }, function(){ $(this).find('#porte_gauche').animate({left:'0px'},{easing: 'easeOutBounce',queue:false,duration:500}); }); $('#porte_double2').hover(function(){ $(this).find('#porte_droite').animate({left:'544px'},{easing: 'easeOutBounce',queue:false,duration:500}); }, function(){ $(this).find('#porte_droite').animate({left:'272px'},{easing: 'easeOutBounce',queue:false,duration:500}); });

La structure HTML :

<div id="porte_double">
    <div id="porte_gauche"> </div>
    <div id="porte_droite"> </div>
    <p> 
       ICI LE CONTENU
    </p> 
</div>

Le CSS :

#porte_double{
position: relative;
overflow: hidden;
height: 125px;			
width: 544px;
margin: 0;			
padding: 0;	
background:#c0cfd6;
border: 3px solid #021d2b;	
}
#porte_gauche{	
background: url('http://i45.servimg.com/u/f45/11/95/30/70/p1p10.png') transparent;
width: 272px;
height: 125px;		
position: absolute;			
top:0;			
left: 0;						
}
#porte_droite{	
background: url('http://i45.servimg.com/u/f45/11/95/30/70/p2p10.png') transparent;
width: 272px;
height: 125px;		
position: absolute;			
top:0;			
right: 0;					
}
#porte_double p{
height: 125px;			
width: 544px;
display: block;
color: #000;			
font: 12px Arial;
margin: 0;			
padding: 4px;	
}

► Il y a sans doute de meilleurs façons d'y arriver, bien que je trouve ma façon de faire plutôt simple, voir même assez logique pour être comprise.

 $('#porte_double2').hover(function(){
$(this).find('#porte_gauche').animate({left:'-50%'},{easing: 'easeOutBounce',queue:false,duration:500});
}, function(){
$(this).find('#porte_gauche').animate({left:'0'},{easing: 'easeOutBounce',queue:false,duration:500});
});

$('#porte_double2').hover(function(){
$(this).find('#porte_droite').animate({left:'100%'},{easing: 'easeOutBounce',queue:false,duration:500});
}, function(){
$(this).find('#porte_droite').animate({left:'50%'},{easing: 'easeOutBounce',queue:false,duration:500});
});

► Chaque porte à sa propre configuration, j'ai volontairement mis une configuration différente aux deux exemples, le premier est animé par rapport aux pixels et le deuxième par rapport aux pourcentages, ce qui est sans doute plus simple à réaliser et à comprendre.

► N'hésitez pas à afficher le code sources pour récupérer les parties qui vous intéresse.