Jquery animieren, ein-und ausblenden

Hätte ich gerne noch zwei Dinge auf einmal passieren, wenn ich auf einen link klicken. Ich bin langsam durch die Jquery-Dokumentation, aber haben noch zu lernen, was ich noch brauchen.

Hier ist ein link zu meinem Website

Wenn ich auf der Dienste-link ich möchte die #slideshow-div zu verstecken und ein neues div zu ersetzen.

Hatte ich versucht einfach nur die Diashow animieren, sich auf einen Klick die Dienste von link, aber es wäre entweder der animate-Funktion oder gehen Sie auf die verlinkte html-Seite, nicht beide. Wie würde ich das bewerkstelligen beide.

Ist es egal, ob ich gerade ein-und ausblenden von divs auf der gleichen Seite, oder wenn ich gehen, um eine neue html-Seite. Ich will nur die animate-Funktion und ändern Sie den Inhalt beim verstecken.

dies ist der jquery code, den ich verwende

$(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');
    }
  );
});

Heim-und Dienstleistungen sind die beiden links, und ich möchte Dienste beim anklicken zum ausblenden der #slideshow-div, und zeigen Sie die slideshow2 div, die verborgen bleiben würden, und ersetzen Sie dann den ersten.

es gibt eine ganze Menge von html, so kann es einfacher sein, zu meiner Quelle aus dem link.

InformationsquelleAutor Cool Guy Yo | 2009-06-21

  1. 11

    Aktualisiert: Diese Lösung aktualisiert wurde nach einem follow-up-Frage in den Kommentaren.

    Sollten Sie die callback-Methode der show/hide-Methoden.

    $("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. */

});

    Die callback-Methode wird der zweite parameter der .show/.ausblenden von Funktionen. Es lief wenn der .show/.hide-Methode abgeschlossen ist. Sie können daher schließen/öffnen der box und innerhalb der callback-Methode ausgeführt, ein Ereignis unmittelbar danach.

    Super, das hat geklappt. Danke! Nur eine kurze Frage, wie würde ich mich über versteckt zwei divs, und ersetzen Sie Sie mit zwei divs auf einer einzigen klicken Sie auf. Technisch bekomme ich es zu arbeiten, aber es ersetzt die beiden divs mit der gleichen Sache, so dass es wiederholt wird. Ich aktualisierte meine Seite mit dem aktuellen problem. Könnten Sie mir erklären, warum der code nicht funktionieren, ohne den bisherigen code, ich war mit darunter.
    Die Lösung wurde aktualisiert, um zu demonstrieren, wie Sie verstecken können, zwei divs, und ersetzen Sie beide mit verschiedenen divs.
    Ja, jetzt erinnere ich mich all dies wurde bereits in den tutorials in der jquery-Dokumentation, aber ich habe nie begreifen Zeug, bis Sie tatsächlich benötigen, es zu benutzen. Gibt es eine Möglichkeit zu animieren .verstecken, wie slideup hat, statt alle in die Obere linke Ecke
    Ändern Sie einfach "ausblenden" zu "slideUp" - wenn Sie beide Effekte in der Dokumentation, Sie werden sehen, dass Sie die gleichen genauen Fußabdruck: Methode(Geschwindigkeit, [callback]); was Bedeutet, alles, was Sie zu tun haben, zu ändern, zu verbergen, um slideup, ist ändern Sie den Namen der Methode 🙂 Das ist es.
    Genial! Zwei Letzte Fragen, vielen Dank übrigens. Gibt es eine Möglichkeit zu animieren, die replaceWith und ich bin mit einem javascript-font ersetzen, wiki.github.com/sorccu/cufon/about gibt es eine Möglichkeit zu bekommen, sich zu bewerben, um die divs, dass ich es mit ersetzen, da Sie passieren, nachdem er ausgeführt wird .

    InformationsquelleAutor Sampson

Schreibe einen Kommentar