Volver al Foro de Diseño de páginas Web

me ayudan sobre jQuery FadeIn y fadeOut

  • huangweiqiu
  • Novice
  • Novice
  • No Avatar
  • Registrado: Oct 07, 2007
  • Mensajes: 21
  • Status: Offline

Nota Abril 11th, 2009, 9:20 am

Soy un principiante, necesito tu ayuda

Yo uso a continuación fragmentos de texto para cambiar todo el contenido de <P>, puedo hacer clic en el <span> que es de clase ". Colapso" para mostrar / ocultar el <p>. Pero quiero usar fadeIn / efecto fadeOut, yo no sé cómo hacer para que me acaba de hacer clic en el mismo <span> para controlar FadeIn / fadeout.thanks de antemano.

Código: [ 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
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Abril 11th, 2009, 9:20 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de Usuario
  • Registrado: Jul 25, 2005
  • Mensajes: 2735
  • Loc: Nashville, TN
  • Status: Offline

Nota Abril 14th, 2009, 9:02 am

Echa un vistazo a la documentación básica slideToggle aquí . Supongo que si quieres usar un palmo en lugar de un botón? Si ése es el caso, entonces algo como esto lo haría:

Código: [ 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
  • Registrado: Oct 07, 2007
  • Mensajes: 21
  • Status: Offline

Nota Abril 14th, 2009, 6:37 pm

gracias, UPSguy, pero no quiero cambiar efecto, quiero FadeIn / fadeOut efecto que el [url] designfloat.com [/ url]
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de Usuario
  • Registrado: Jul 25, 2005
  • Mensajes: 2735
  • Loc: Nashville, TN
  • Status: Offline

Nota Abril 14th, 2009, 7:12 pm

No veo la jQuery en el sitio que está señalando, y espero que esto es lo que desean. Tuvo que trabajar en éste por un minuto ;) Didnt ver fácilmente por ahí en cualquier lugar...

EDIT: OK, yo veo los resúmenes de ahora, y sí, esto debe hacer usted.

Código: [ 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.  


Establecer la visibilidad dentro y fuera no es especialmente requerida por el jQuery, pero proporciona un indicador para conocer el estado actual del párrafo. Sólo sé que este control de todos los párrafos de la página - si usted desea conseguir específicos, dar su punto de identidad o el grupo de los apartados una determinada clase CSS vacío y utilizar estos mecanismos en el selector de jQuery en lugar de p.
I'd love to change the world, but they won't give me the source code.
  • huangweiqiu
  • Novice
  • Novice
  • No Avatar
  • Registrado: Oct 07, 2007
  • Mensajes: 21
  • Status: Offline

Nota Abril 15th, 2009, 1:07 am

UPSGuy, usted es tan amable, gracias por tu ayuda, funciona perfectamente.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de Usuario
  • Registrado: Jul 25, 2005
  • Mensajes: 2735
  • Loc: Nashville, TN
  • Status: Offline

Nota Abril 15th, 2009, 4:48 am

No hay problema, encantados de ayudarle. Ya sabes donde encontrarme. ;)
I'd love to change the world, but they won't give me the source code.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 6 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 90 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC