Jquery оживить прятки - PullRequest
Новая
       34

Jquery оживить прятки

11 голосов
/ 22 июня 2009

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

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

Когда я нажимаю на ссылку службы, я хотел бы, чтобы #slideshow div скрыл, и новый 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');
    }
  );
});

home и services - это две ссылки, и я хотел бы, чтобы при нажатии кнопки сервисы скрывали #slideshow div и показывали slideshow2 div, который будет скрыт, а затем заменяет первую.

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

1 Ответ

11 голосов
/ 22 июня 2009

Обновлено: Это решение было обновлено после дополнительного вопроса в комментариях.

Вы должны использовать метод обратного вызова методов 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. Поэтому вы можете закрыть / открыть свой ящик и сразу же после этого запустить метод обратного вызова.

...