Jquery оживить прятки
-
06-07-2019 - |
Вопрос
Я бы хотел, чтобы две вещи происходили одновременно, когда я нажимал на ссылку. Я медленно изучаю документацию 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, поэтому может быть проще просмотреть мой источник по ссылке.
Решение
Обновлено. Это решение было обновлено после дополнительного вопроса в комментариях.
Вы должны использовать метод обратного вызова методов 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. Поэтому вы можете закрыть / открыть свой ящик и сразу же после этого запустить метод обратного вызова.