Как плавно переходить на страницу, используя div, когда нажимаете навигационную ссылку

Question

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

- это код для затухания изображения заставки при нажатии на любую ссылку в навигационной панели

 $(document).ready(function() {
     $("a").click(function() {
         $(".moon1").fadeOut(2000);
     });
 });

- это идентификатор id, который я открываю для различных навигационных ссылок в

<div id="page"></div>

вот код, который я использовал для открытия ссылок в div id при нажатии на ссылку в навигационной панели. Этот конкретный код находится в отдельном .js-

jQuery(document).ready(function($) {
    $("a").click(function(event) {
        link=$(this).attr("href");
        $.ajax({
            url: link,
        })
        .done(function(php) {
            $("#page").empty().append(php);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        return false;
    });
});

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

Answer 1

Вы хотите что-то подобное?

1) FadeOut перед отправкой ajax
2) FadeIn после успешного ajax

jQuery(document).ready(function($) {
    $("a").click(function(event) {
        link=$(this).attr("href");
        $.ajax({
            url: link,
            beforeSend: $('.moon1').fadeOut(2000)
        })
        .done(function(php) {
            $('.moon1').fadeIn(1000);
            $("#page").empty().append(php);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        return false;
    });
});