Jquery animować ukryj i pokaż

Question

Chciałbym, aby dwie rzeczy zdarzyły się jednocześnie, gdy kliknę link. Powoli przechodzę przez dokumentację Jquery'ego, ale muszę jeszcze nauczyć się tego, czego potrzebuję.

Oto link do mojego site

Kiedy klikam na usługi odwołuje Chciałbym div #slideshow do ukrycia, a nowy div go zastąpić.

Próbowałem po prostu włączyć animację pokazu slajdów po kliknięciu linku usług, ale zrobiłoby to albo funkcję animacji albo przejdź do połączonej strony html, a nie do obu. Jak mógłbym osiągnąć oba.

Nie ma znaczenia, czy po prostu ukryję i pokaż elementy div na tej samej stronie, czy przejdę na nową stronę HTML. Po prostu chcę mieć funkcję animacji i zmieniać zawartość podczas jej ukrywania.

jest to kod jquery Używam

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

domu i usługi są dwa linki, i chciałbym usługi po kliknięciu ukryć div #slideshow i pokazać div slideshow2, co byłoby ukryte, a następnie zastąpić pierwsze.

jest spora ilość html, więc może być łatwiej zobaczyć moje źródło z linku.

Answer 1

Zaktualizowane: To rozwiązanie zostało zaktualizowane po kolejnym pytaniu w komentarzach.

Powinieneś użyć callback method metod pokazywania/ukrywania.

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

}); 

Metoda zwrotna to drugi parametr funkcji .show/.hide. Jest uruchamiany, gdy metoda .show/.hide jest zakończona. W związku z tym możesz zamknąć/otworzyć skrzynkę iw ramach metody wywołania zwrotnego uruchomić zdarzenie natychmiast po tym.