我需要在 asp.net 中使用 jQuery 淡入页面部分答案

【问题标题】：I need to fade in a page section using jQuery inside asp.net我需要在 asp.net 中使用 jQuery 淡入页面部分
【发布时间】：2017-10-21 11:47:01
【问题描述】：

我正在尝试在页面加载后立即使页面内的 div 淡入，但我没有得到任何结果。我尝试直接在内容页面中引用 jQuery 和 js 脚本，但无济于事。我认为如果我在母版页中引用了脚本，它应该可以正常工作，因为我在 js 脚本中的其他功能工作正常。我真的不知道我做错了什么以及如何让这种淡入淡出效果起作用。这是我的代码：

index.aspx（内容页面）

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
        <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
        </asp:Content>
        <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
            <div id="main-content">
                ...
            </div>

Frontend.master（母版页）

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Some title</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../css/custom.css" rel="stylesheet" type="text/css" />
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="row" id="main-page-container">
                <div class="col-md-3" id="nav-pane">
                    <nav class="navbar">
                        <div class="">
                            <ul class="nav nav-pills nav-stacked mr-auto" id="main-nav">
                                <li class="active" id="home"><a href="../index.aspx">Home</a></li>
                                <li class="" id="aboutMe"><a href="../ContentPages/aboutMe.aspx">About Me</a></li>
                                <li class="" id="works"><a href="../ContentPages/works.aspx">Works</a></li>
                                <li class="" id="works"><a href="../ContentPages/skills.aspx">Skills</a></li>
                                <%--<li class="" id="contactMe"><a href="../ContentPages/contactMe.aspx">Contact Me</a></li>--%>
                        </div>
                </ul>

                    </nav>

                </div>
                <div class="col-md-9" id="content-area">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </div>

        <script src="../js/jquery-3.2.1.min.js"></script>
        <script src="../js/JavaScript.js"></script>

    </form>
</body>
</html>

JavaScript.js

$(document).ready(function () {   

    //Content Fade in
    $('.navbar .nav li a').click(function () {
        $('#recent-achievements').fadeIn(3000);
    });

});

【问题讨论】：

bootstrap.js 需要先加载jquery.js。
ASP.NET 与此无关。为什么您的 HTML 代码没有一个带有属性 id="recent-achievements" 的 HTML 元素
对不起布赖恩。我忘了包括具有最近成就的 id 的
。它在
里面
Alex 我把 jquery.js 改成了 bootstrap.js 之前的 head 标签，但是还是不行。

【解决方案1】：

除非我遗漏了一些基本的东西，否则将你想要淡入的元素“隐藏”在你的 html 中：

<div id="element-to-fadein" hidden>Recent achievements</div>

然后在“文档准备就绪”中将其淡入：

$(document).ready(function () {   
    $('#element-to-fadein').fadeIn(3000);
});

另外，顺便说一句，您参考：

<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap.js"></script>

在<head>页面底部引用jQuery之前：

<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/JavaScript.js"></script>

您应该确保首先引用 jQuery，并且在该引用下方有其他脚本。

希望对你有帮助。

【讨论】：

在jquery中不需要添加“hidden”属性来实现淡化效果。他只是不包括head标签内的jquery脚本
@Sam R Heh，谢谢 - 您可以将其标记为答案并给予支持，我就是您的全部！
@RickLiguz 我将其标记为答案，但由于我的代表如此之低，它不会公开显示我的支持。对不起。