时间戳

首页 > 解决方案 > 单击导航链接时如何使用 div 淡入和淡出页面

php - 单击导航链接时如何使用 div 淡入和淡出页面

问题描述

我有一个带有 ajax 导航栏的页面。当您单击导航栏中的各种链接时，我会在 Div id 中打开各种页面。我希望它们淡入淡出。

这是单击导航栏中的任何链接时淡出启动页面图像的代码

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

这是我打开各种导航链接的 div 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;
    });
});

所有这些代码都可以正常工作并且令我满意。我只想在从一页到另一页时淡入淡出各种页面。谢谢

标签： phpjquery

解决方案

你想要这样的东西吗？

1) ajax 发送前 FadeOut
2) ajax 成功后 FadeIn

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;
    });
});

推荐阅读