Forum : Problème d'animation jquery

Je veux créer une actions de cacher et masquer une balise <div> grâce au jquery. Le problème j'ai créer deux boutons différent un qui afficher la balise «#BodyGallery» qui est caché par défaut. J'ai essayer de faire l'animation du slideUp. J'ai écrit le code suivant dans un fichier .js externe que j'ai relier à la page index.php de mon site web.

jQuery(function($) {
    /*
     * Actions for display and mask the gallery on the page.
    */
    $("#1").click(function() {
        $("#BodyLeftMain").show("slow",function() {
            $(this).next("#BodyLeftMain").show("fast",arguments.callee);
        });
    });
});

Le problème le bouton qui a le id-"1" qui est posé d'afficher le contenu ne fonctionne pas.

Comment faire pour cacher et masquer une la balise qui a l'id #BodyGallery grâce au jquery.

Pour mieux vous éclairer mon problème voici un extrait de mon code html de la page index.php.

<body class="artsgallery">
<!-- Begin of #ScreenGallery -->
<div id="ScreenGallery">
  <div id="MainContainer">
    <h1>artsgallery</h1>
    <p>Bienvenue<br />
      Je vous la souhaite la bienvenue dans la galerie d'art! Pour afficher la galerie, il faut que vous cliquer sur le bouton "Ouvrir" qui est juste en-bas complètement de cette page. Si vous voulez cacher la gallerie, il faut que vous cliquer sur le bouton "fermer" qui est juste à coté du bouton qui permette d'afficher la gallerie.</p>
  </div>
</div>
<!-- End of #ScreenGallery -->
<a href="#" id="1">Afficher</a>
<a href="#" id="2">masquer</a>
<!-- Begin of #BodyGallery -->
<div id="BodyGallery">
  <div id="ContainerGallery">
    <div id="HeadGallery">
      <h1>Bibliothèque d'arts</h1>
      <p>Voici la bibliothèque d'arts, dans cette bibliothèque vous avez tous les outils à votre disposition. La bibliothèque d'art de la galerie à été pensé pour que vous puissez vous retrouver plus facilement dans cette endroit intéractif. Pour commprendre le fonctionement de la page, vous avez un bouton en bleu claire qui est dans la liste gauche des photos au-dessus de la liste des catégories. Ce bouton permet de voire la visite guidée.</p>
      <p>* Pour afficher la liste de gauche il faut que vous ouvrez en premier lieux le paneau d'options en cliquent sur le bouton « Paneau d'options» et vous cliquez sur le bouton « afficher cette élément » qui est en-dessus du nom de l'élément.</p>
    </div>
    <!-- Begin of #BodyMainGallery -->
    <div id="BodyMainGallery">
      <!-- Begin of #optionPanel -->
      <div id="optionPanel">
        <div id="optionContainer">
          <h3>Paneau d'options</h3>
          <p>Vous avez ouverte le paneau d'options de la bibliothèque d'arts. Ici, vous avez tout les composantes de la présentations de la galerie. Cliquez sur les boutons des divers éléments que vous voulez afficher ou ne pas afficher. Le résultat est automatique, alors pas besoin d'enreigistrer vos réglages.</p>
          <div id="optionName">Liste des catégories</div>
          <table width="100%" border="0" cellspacing="10" cellpadding="0">
            <tr>
              <td><button id="display">Afficher cette élément...</button></td>
              <td><button id="maskele">Masquer cette élément...</button></td>
            </tr>
          </table>
        </div>
      </div>
      <!-- End of #optionPanel -->
      <!-- Begin of #BodyLeftMain -->
      <div id="BodyLeftMain">
        <div id="Options">
          <h3>Options</h3>
          <div id="LinkButton">Voir la visite guidée...</div>
        </div>
        <div id="CategoryList">
          <ul>
            <li><a href="#">Dessins</a></li>
            <li><a href="#">Montage d'images</a></li>
            <li><a href="#">Arts graphique</a></li>
          </ul>
        </div>
      </div>
      <!-- End of #BodyLeftMain -->
      <!-- Begin of #BodyRightMain -->
      <div id="BodyRightMain">
        <h1>Bibliothèque d'arts - Nom de la catégorie</h1>
        <p>Description nom disponible pour cette la catégorie « Nom de la catégorie ».</p>
        <div id="Mapimg"></div>
      </div>
      <!-- End of #BodyRightMain -->
      <div class="Clear"></div>
    </div>
    <!-- End of #BodyMainGallery -->
  </div>
</div>
<!-- End of #BodyGallery -->
</body>

Merci de votre aide! :P

Problème d'animation jquery

1 réponse