Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci Enregister sous : ctrl Shift S




Les tutoriaux: Index » Jquery » ScriptsJquery » Slide avec animate()

Introduction

  • Tutoriel posté par Sky
  • 2070 lectures
  • Mis en ligne le 16-09-2010
  • Dernière mise à jour le 16-09-2010
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Nous allons voir dans cet article le moyen de créer des blocs cachés qui s'affiche en animation Jquery.




Méthodologie

Code HTML

CODE HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript" src="animate.js"></script>
	
</head>
<body>




 

 









 

 




	


 

 





 

 




</body>
</html>



Code CSS

CODE CSS


body { 
background-color:#000;
margin:0;
padding:0;
overflow:hidden;
}

#div_top
{
position:absolute;
top:-200px;
left:10px;
height:230px;
width:400px;
border:2px #fff solid;
background-color:#ccc;
text-align:center;
}

#div_top_hide
{
display:none;
}

#div_bottom
{
position:absolute;
bottom:-200px;
right:10px;
height:230px;
width:400px;
border:2px #fff solid;
background-color:#ccc;
text-align:center;
}

#div_bottom_hide
{
display:none;
}


#div_right
{
position:absolute;
right:-200px;
top:10px;
height:400px;
width:230px;
border:2px #fff solid;
background-color:#ccc;
text-align:center;
}

#div_right_hide
{
display:none;
}

#div_left
{
position:absolute;
left:-200px;
bottom:10px;
height:400px;
width:230px;
border:2px #fff solid;
background-color:#ccc;
text-align:center;
}

#div_left_hide
{
display:none;
}



Code JAVASCRIPT

CODE JAVASCRIPT


/* SCRIPT PAR SKY POUR TUTOMANIA.COM  */

    $(document).ready(  function()
    {
    
    $('#div_top').click(function()
    {

    /* ANIMATION BLOC DU HAUT  */
    
    if ($('#div_top_hide').is(":hidden"))
    {
    $("#div_top").animate({top: "0px"}, 300);
    $("#div_top_hide").css({ display: "block" });
    }else{
    $("#div_top").animate({top: "-200px"}, 300);
    $("#div_top_hide").css({ display: "none" });
    }
    });
    
    /* ANIMATION BLOC DU BAS  */
    
    $('#div_bottom').click(function()
    {
    if ($('#div_bottom_hide').is(":hidden"))
    {
    $("#div_bottom").animate({bottom: "0px"}, 300);
    $("#div_bottom_hide").css({ display: "block" });
    }else{
    $("#div_bottom").animate({bottom: "-200px"}, 300);
    $("#div_bottom_hide").css({ display: "none" });
    }
    });
    
    /* ANIMATION BLOC DE DROITE  */

    $('#div_right').click(function()
    {
    if ($('#div_right_hide').is(":hidden"))
    {
    $("#div_right").animate({right: "0px"}, 300);
    $("#div_right_hide").css({ display: "block" });
    }else{
    $("#div_right").animate({right: "-200px"}, 300);
    $("#div_right_hide").css({ display: "none" });
    }
    });
    
    /* ANIMATION BLOC DE GAUCHE  */
    
    $('#div_left').click(function()
    {
    if ($('#div_left_hide').is(":hidden"))
    {
    $("#div_left").animate({left: "0px"}, 300);
    $("#div_left_hide").css({ display: "block" });
    }else{
    $("#div_left").animate({left: "-200px"}, 300);
    $("#div_left_hide").css({ display: "none" });
    }
    });
    
    });



Un peu d'explication

CODE JAVASCRIPT


    /* ANIMATION BLOC DE GAUCHE  */
    
    $('#div_left').click(function()
    {
    if ($('#div_left_hide').is(":hidden"))
    {
    $("#div_left").animate({left: "0px"}, 300);
    $("#div_left_hide").css({ display: "block" });
    }else{
    $("#div_left").animate({left: "-200px"}, 300);
    $("#div_left_hide").css({ display: "none" });
    }
    });



Comment cela fonctionne t-il ? Comme beaucoup de script il s'agit bien souvent "d'une vue de l'esprit".
Il existe beaucoup de moyen pour arriver à ses fins, en voici une simple et accessible à tous :)

Tout d'abord nous définissons une action lors du clic sur le div ayant pour id #div_left
CODE JAVASCRIPT


    
    $('#div_left').click(function()
    {
    /* INSTRUCTIONS ICI */ 
    });



Ensuite nous effectuons une vérification simple pour connaitre l'aspect actuel de notre div.
Dans notre CSS nous avons définis que #div_left_hide est en display:none; dés son premier affichage.
La vérification (condition: if - else) ci-dessous est donc vraie, nous allons donc exécuter le code entre { et }
Nous lançons l'animation sur #div_left. Nous passons ensuite #div_left_hide en display:block;
Comme cela lors du prochain clic la condition deviendra fausse et nous pourrons exécuter le code "else".

CODE JAVASCRIPT


    if ($('#div_left_hide').is(":hidden"))
    {
    $("#div_left").animate({left: "0px"}, 300);
    $("#div_left_hide").css({ display: "block" });
    }else{
    $("#div_left").animate({left: "-200px"}, 300);
    $("#div_left_hide").css({ display: "none" });
    }



Vous remarquerez dans mon code que le div #div_left_hide ne sert finalement qu'a connaitre la position actuelle de notre div #div_left et ainsi effectuer notre condition.

la fonction animate() de Jquery



Visiter le site officiel de jQuery : fonction animate
Notes

  Evaluez le tutorial (2 Votes)

2
0
0

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Jquery] Slide avec animate()

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com