Retour à Forum de site web

aidez-moi à propos de JQuery FadeIn et FadeOut

  • huangweiqiu
  • Novice
  • Novice
  • No Avatar
  • Inscription: Oct 07, 2007
  • Messages: 21
  • Status: Offline

Message Avril 11th, 2009, 9:20 am

Je suis débutant, j'ai besoin de votre aide

J'utilise des extraits ci-dessous pour activer tout le contenu du <P>, je ne puis cliquez sur le <span> quelle classe est ". Effondrement" pour afficher / cacher le <p>. Mais je veux utiliser fadeIn / effet d'effacement, je ne sais pas comment faire pour que je puis cliquez simplement sur le même <span> pour contrôler fadein / fadeout.thanks à l'avance.

Code: [ Select ]
$(function()
{
$("p").slideToggle("1");
$(".collapse").click(function(event) {
event.preventDefault();
$(this).parents(".offset").find("p").slideToggle("1000");
});
});
  1. $(function()
  2. {
  3. $("p").slideToggle("1");
  4. $(".collapse").click(function(event) {
  5. event.preventDefault();
  6. $(this).parents(".offset").find("p").slideToggle("1000");
  7. });
  8. });
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Avril 11th, 2009, 9:20 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Avril 14th, 2009, 9:02 am

Jetez un oeil à la documentation de base slideToggle ici . Je suppose que vous voulez juste utiliser une durée au lieu d'un bouton? If thats le cas, quelque chose du style ne serait-il faire:

Code: [ Select ]
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
   
    $("span").click(function () {
      $("p").slideToggle("slow");
    });
 
  });
  </script>
  <style>
  p { width:400px; }
  </style>
</head>
<body>
  <span>Toggle</span>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
</body>
</html>
 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3.                     "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  7.  
  8.   <script>
  9.   $(document).ready(function(){
  10.    
  11.     $("span").click(function () {
  12.       $("p").slideToggle("slow");
  13.     });
  14.  
  15.   });
  16.   </script>
  17.   <style>
  18.   p { width:400px; }
  19.   </style>
  20. </head>
  21. <body>
  22.   <span>Toggle</span>
  23.   <p>
  24.     This is the paragraph to end all paragraphs.  You
  25.     should feel <em>lucky</em> to have seen such a paragraph in
  26.     your life.  Congratulations!
  27.   </p>
  28. </body>
  29. </html>
  30.  
I'd love to change the world, but they won't give me the source code.
  • huangweiqiu
  • Novice
  • Novice
  • No Avatar
  • Inscription: Oct 07, 2007
  • Messages: 21
  • Status: Offline

Message Avril 14th, 2009, 6:37 pm

thanks, UPSguy, mais je ne veux pas basculer effet, je veux FadeIn / effacement effet que la [url] designfloat.com [/ url]
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Avril 14th, 2009, 7:12 pm

Je ne vois pas le jquery sur le site vous pointez, alors j'espère que c'est ce que vous manquent. A dû travailler sur celui-ci pour une minute ;) Na pas le voir facilement là-bas partout...

EDIT: OK, je vois les résumés maintenant, et oui, cela devrait vous faire.

Code: [ Select ]
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
   
    $("span").click(function () {
      $("p").each(function() {
        vis = $(this).css("visibility");
        if(vis == "visible") {
          $(this).fadeOut('slow',function() {
            $(this).css("visibility","hidden");
          });
        } else {
          $(this).css("visibility","visible");
          $(this).fadeIn('slow');
        }
      });
    });
  });
  </script>
  <style>
  p { width:400px; }
  </style>
</head>
<body>
  <span>Toggle</span>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
</body>
</html>
 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3.                     "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  7.  
  8.   <script>
  9.   $(document).ready(function(){
  10.    
  11.     $("span").click(function () {
  12.       $("p").each(function() {
  13.         vis = $(this).css("visibility");
  14.         if(vis == "visible") {
  15.           $(this).fadeOut('slow',function() {
  16.             $(this).css("visibility","hidden");
  17.           });
  18.         } else {
  19.           $(this).css("visibility","visible");
  20.           $(this).fadeIn('slow');
  21.         }
  22.       });
  23.     });
  24.   });
  25.   </script>
  26.   <style>
  27.   p { width:400px; }
  28.   </style>
  29. </head>
  30. <body>
  31.   <span>Toggle</span>
  32.   <p>
  33.     This is the paragraph to end all paragraphs.  You
  34.     should feel <em>lucky</em> to have seen such a paragraph in
  35.     your life.  Congratulations!
  36.   </p>
  37. </body>
  38. </html>
  39.  


Réglage de la visibilité sur et en dehors n'est pas particulièrement nécessaire par le jQuery, mais il fournit un indicateur pour connaître l'état actuel du paragraphe. Il suffit de savoir que cela va contrôler tous les paragraphes de votre page - si vous voulez obtenir spécifiques, donnez votre point un identifiant ou un groupe de points d'une catégorie particulière css vide et utiliser ces mécanismes dans votre sélecteur jQuery, au lieu de p.
I'd love to change the world, but they won't give me the source code.
  • huangweiqiu
  • Novice
  • Novice
  • No Avatar
  • Inscription: Oct 07, 2007
  • Messages: 21
  • Status: Offline

Message Avril 15th, 2009, 1:07 am

UPSGuy, vous êtes gentils, merci beaucoup pour votre aide, il fonctionne parfaitement.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Avril 15th, 2009, 4:48 am

Pas de problème, heureux de vous aider. Vous savez où me trouver. ;)
I'd love to change the world, but they won't give me the source code.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 6 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 128 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC