Jquery animate ocultar y mostrar

Me gustaría tener suceden dos cosas a la vez cuando hago clic en un enlace. Poco a poco voy a ir a través de la documentación de Jquery, pero todavía tienen que aprender lo que me falta todavía.

Aquí hay un enlace a mi sitio

Cuando hago clic en el enlace de los servicios de me Gustaría que el #slideshow div a ocultar, y un nuevo div para reemplazarlo.

Había intentado tener a la presentación de diapositivas animación de salida se hace clic en el enlace de los servicios, pero que iba a hacer la función animar o ir a los enlaces de la página html, no tanto. ¿Cómo puedo lograr ambas.

No importa si acabo de mostrar y ocultar divs en la misma página, o si puedo ir a una nueva página html. Solo quiero tener la función animate y cambiar el contenido, mientras que esconde uno.

este es el código jquery estoy usando

$(document).ready(function(){   
  $("a.home").toggle(
    function(){
      $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow');   
    },
    function(){
      $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow');   
    }
  );
});

$(document).ready(function(){   
  $("a.services").toggle(
    function(){
      $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow');
    },
    function(){
      $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
    }
  );
});

hogar y los servicios son los dos enlaces, y me gustaría servicios cuando se hace clic para ocultar la #slideshow div, y mostrar la slideshow2 div, que se oculta y, a continuación, reemplace el primero.

hay una buena cantidad de código html por lo que puede ser más fácil para ver mi fuente desde el enlace.

InformationsquelleAutor Cool Guy Yo | 2009-06-21

1 Kommentar

  1. 11

    Actualizado: Esta solución se ha actualizado después de una pregunta de seguimiento en los comentarios.

    Debe utilizar el método de devolución de llamada de mostrar/ocultar métodos.

    $("a").click(function(){
    
      /* Hide First Div */
      $("#div1").hide("slow", function(){
        /* Replace First Div */
        $(this).replaceWith("<div>New Div!</div>");
      });
    
      /* Hide Second Div */
      $("#div2").hide("slow", function(){
        /* Replace Second Div */
        $(this).replaceWith("<div>New Div!</div>");
      });
    
      /* If you wanted to sequence these events, and only
         hide/replace the second once the first has finished,
         you would take the second hide/replace code-block 
         and run it within the callback method of the first
         hide/replace codeblock. */
    
    });

    El método de devolución de llamada es el segundo parámetro de la .mostrar/.ocultar funciones. Se corrió siempre .mostrar/.ocultar método se ha completado. Por lo tanto, puede cerrar/abrir su caja, y dentro del método de devolución de llamada de ejecutar un evento inmediatamente después.

    • Genial, que trabajó. Gracias! Sólo una pregunta rápida, ¿cómo puedo ocultar dos divs, y la sustitución de ellos con dos divs en un solo clic. Técnicamente puedo conseguir que funcione, pero reemplaza ambos divs con la misma cosa, de modo que se repite. He actualizado mi sitio con el problema actual. Podría usted explicarme por qué, tu código no funciona sin el anterior código que se utiliza debajo de ella.
    • La solución ha sido actualizado para demostrar cómo se puede ocultar dos divs, y reemplazar ambos con diferentes divs.
    • Sí, ahora me acuerdo de todo esto fue cubierto en los tutoriales de la documentación de jquery, pero yo nunca comprender las cosas hasta que realmente se necesita para usarlo. Es allí una manera de animar a la .ocultar como slideup hace en vez de todo en la esquina superior izquierda
    • Acaba de cambiar a «esconder» a «slideUp» – si usted compruebe ambos efectos en la documentación, vas a ver que tienen exactamente la misma huella: método(velocidad, [callback]); lo que Significa, todo lo que tienes que hacer para cambiar de ocultar a slideup, es cambiar el nombre del método 🙂 Eso es todo.
    • Su impresionante! Dos últimas preguntas, muchas gracias por el camino. Es allí una manera de animar a la replaceWith y estoy usando una fuente javascript reemplazar, wiki.github.com/sorccu/cufon/about es allí una manera de conseguir que se aplique a los divs que puedo reemplazar con, ya que se producen después de que se ejecute .
    • No estoy seguro de lo que quieres decir por «animar la replaceWith.» Que método de tiras un pedazo de HTML, y se inserta otro. La única sensación de «animación» sería a desvanecerse la primera en salir, y se desvanecen en el segundo. Pero esa no es realmente la animación de la transición – es sólo la animación de ambos elementos de forma individual.
    • En cuanto a tu segunda pregunta, yo nunca he usado «Cufon,» pero si tiene un método manual para invocarlo, llamaría a que tras la adición de su nuevo divs. Parece, desde mi comprensión de la doc, usted puede llamar a Curfon.replace(«elemento»); – que probablemente sería su opción después de que el nuevo divs están a la vista. Acaba de cambiar el H1 para reflejar su nuevo contenido.
    • Es posible la sustitución de la devolución de llamada con el uso de .promise().done()?

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...