Jquery animate hide and show

Question

Я бы хотел, чтобы две вещи случались сразу, когда я нажимаю на ссылку. Я медленно просматриваю документацию Jquery, но еще не знаю, что мне нужно.

Вот ссылка на мой site

Когда я нажимаю на услуги ссылки Я хотел бы #slideshow ДИВ, чтобы скрыть, и новый DIV, чтобы заменить его.

Я попытался настроить анимацию слайд-шоу при нажатии ссылки на службы, но он либо выполнит функцию анимации, либо перейдет на связанную страницу html, а не обе. Как бы я выполнил оба.

Не имеет значения, если я просто скрою и покажу divs на одной странице, или если я перейду на новую страницу html. Я просто хочу иметь функцию анимации и изменять содержимое, скрывая его.

это код JQuery Я использую

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

дом и услуги являются две ссылки, и я хотел услуг при нажатии, чтобы скрыть #slideshow DIV, и показать slideshow2 DIV, который будет и затем заменить первый.

Существует достаточное количество html, поэтому может быть проще просмотреть мой источник по ссылке.

Answer 1

Последнее обновление: Данное решение было обновлено в соответствии с последующим вопросом в комментариях.

Вы должны использовать методы отображения/скрытия callback method.

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

}); 

Метод обратного вызова является вторым параметром функций .show/.hide. Он запускается всякий раз, когда заканчивается метод .show/.hide. Поэтому вы можете закрыть/открыть окно, а в методе обратного вызова запустить событие сразу же после этого.