JQuery анимация скрыть и показать

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

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

Когда я нажимаю на ссылку сервисов, я хотел бы, #slideshow div #slideshow скрывался, и новый div заменял его.

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

Не имеет значения, просто я прячу и показываю div на той же странице, или если я перехожу на новую 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, поэтому может быть легче просмотреть мой источник по ссылке.

Ответы

Ответ 1

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

Вы должны использовать метод обратного вызова методов show/hide.

$("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. Поэтому вы можете закрыть/открыть окно, а в методе обратного вызова запустить событие сразу же.