个人中心
gpt4 book ai didi

jquery - 文本不淡入/淡出，可能是什么问题？

转载 作者：行者123 更新时间：2023-11-27 23:35:24 27 4
gpt4 key购买 nike

已修复!我需要使用 Jquery 的完整核心而不是精简版

我重叠了两个 div 容器。现在在网站加载时我想隐藏一个 div，如果我输入第二个 div(在这种情况下是标题)，这个标题应该淡出，第一个 div(正文)应该淡入。我可以在开始时隐藏它，但在任何情况下它都会播放任何淡入淡出的动画。

我尝试了 div 中的每个(我知道的)文本容器，例如 h1(用于标题)、span 和 p。它们都不起作用:(

#navbar-header a {
    font-size: 20px;
}

#navbar-header {
    padding-right: 30px;
}

body, html {
    height: 100%;
}

.dropdown-item {
    font-size: 15px !important;
}

.navbar {
    opacity: 0.7 !important;
}

footer {
    background-color: white;
    opacity: 0.7 !important;
}

#welcomeHead{
    position: absolute;
    text-align: center;
    padding-top: 300px;
    font-family: 'Varela Round';
    font-size: 3rem;
    width: 100%;
    line-height: 3rem;
    letter-spacing: .8rem;
    color: #000000;
}
#welcomeBody{
    text-align: center;
    padding-top: 200px;
    font-family: 'Varela Round';
    font-size: 2rem;
    width: 100%;
    line-height: 3rem;
    color: #000000 !important;
    position: absolute;
}
<!doctype html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <link href="style.css" rel="stylesheet">
    <script>$(document).ready(function () {
        $("#welcomeBody").hide();
        $("#welcomeHead").mouseenter(function () { 
        $("#welcomeHead").fadeOut();
        });
        });</script>
</head>

<body id="bootstrap-overrides">

    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
        <a class="navbar-brand" href="#">
            <img src="damnik_logo.png" width="100" height="100" class="d-inline-block align-top" alt="logo">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ml-auto" id="navbar-header">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Aufgaben
                    </a>
                    <div class="dropdown-menu" id="test" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">HTML Brief</a>
                        <a class="dropdown-item" href="#">Erste Website</a>
                        <a class="dropdown-item" href="#">CSS</a>
                        <a class="dropdown-item" href="#">Tabellen</a>
                        <a class="dropdown-item" href="#">JavaScript</a>
                        <a class="dropdown-item" href="#">Raster Layout</a>
                        <a class="dropdown-item" href="#">Bootstrap</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Bericht</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#">Kontakt</a>
                </li>
            </ul>
        </div>
    </nav>
    <div>
        <span class="mx-auto my-0 text-uppercase" id="welcomeHead">Willkommen auf meiner Seite</span>
    </div>
    <div>
        <span class="text-white-50 mx-auto mt-2 mb-5" id="welcomeBody"> Auf dieser Seite wird ihnen mein Portfolio, mit
            allen
            bisher erfüllten Aufgaben bereigestellt.
            Diese finden sie unter dem Punkt Aufgaben.<br>
            Unter Bericht steht ihnen der gesamte Werdegang dieser Seite anschaulich zur Verfügung.<br>
            Infos zu meiner Person und meinem persöhnlichen Werdegang finden sie unter About.<br>
            Falls es nach dies allem noch Fragen, Wünsche oder Anmerkungen gibt können sie mich unter
            Kontakt jederzeit per Mail kontaktieren.<br>
            Viel Spaß auf meiner Seite.</span>
    </div>
    <footer class="page-footer font-small cyan darken-3 fixed-bottom">
        <!-- Quelle:https://mdbootstrap.com/education/bootstrap/ -->
        <div class="footer-copyright text-center py-3">
            <img src="damnik_logo.png" width="25" height="25" class="d-inline-block align-top" alt="logo">
            © 2019 Copyright: Marvin Damnik
            <a href="#">Impressum</a>
        </div>
    </footer>
</body>

</html>

好的，在堆栈溢出时，我看到我运行了一条错误消息，指出 fadeOut 不是一个方法。但在这种情况下，更多的问号出现在我的头上。它不是来自 jquery 的有效方法？ Jquery 在我的意思是包含在这个元素中的 Bootstrap o.O

已修复。超过 12 小时前，我开始了这个元素，我很困惑，如果 slim 的版本会产生问题，现在我不再认识到这一点，浪费了 1 个多小时来解决这个问题......谢谢大家

最佳答案

包括 jQuery 核心。可以找到slim和core版本的区别here .

简而言之，像 fadeOut 这样的效果在 slim 版本中不可用，这是导致问题的原因。

#navbar-header a {
  font-size: 20px;
}

#navbar-header {
  padding-right: 30px;
}

body,
html {
  height: 100%;
}

.dropdown-item {
  font-size: 15px !important;
}

.navbar {
  opacity: 0.7 !important;
}

footer {
  background-color: white;
  opacity: 0.7 !important;
}

#welcomeHead {
  position: absolute;
  text-align: center;
  padding-top: 300px;
  font-family: 'Varela Round';
  font-size: 3rem;
  width: 100%;
  line-height: 3rem;
  letter-spacing: .8rem;
  color: #000000;
}

#welcomeBody {
  text-align: center;
  padding-top: 200px;
  font-family: 'Varela Round';
  font-size: 2rem;
  width: 100%;
  line-height: 3rem;
  color: #000000 !important;
  position: absolute;
}
<!doctype html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <link href="style.css" rel="stylesheet">
  <script>
    $(document).ready(function() {
      $("#welcomeBody").hide();
      $("#welcomeHead").mouseenter(function() {
        $("#welcomeHead").fadeOut();
      });
    });
  </script>
</head>

<body id="bootstrap-overrides">

  <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="#">
      <img src="damnik_logo.png" width="100" height="100" class="d-inline-block align-top" alt="logo">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto" id="navbar-header">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Aufgaben
                    </a>
          <div class="dropdown-menu" id="test" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">HTML Brief</a>
            <a class="dropdown-item" href="#">Erste Website</a>
            <a class="dropdown-item" href="#">CSS</a>
            <a class="dropdown-item" href="#">Tabellen</a>
            <a class="dropdown-item" href="#">JavaScript</a>
            <a class="dropdown-item" href="#">Raster Layout</a>
            <a class="dropdown-item" href="#">Bootstrap</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Bericht</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#">Kontakt</a>
        </li>
      </ul>
    </div>
  </nav>
  <div>
    <span class="mx-auto my-0 text-uppercase" id="welcomeHead">Willkommen auf meiner Seite</span>
  </div>
  <div>
    <span class="text-white-50 mx-auto mt-2 mb-5" id="welcomeBody"> Auf dieser Seite wird ihnen mein Portfolio, mit
            allen
            bisher erfüllten Aufgaben bereigestellt.
            Diese finden sie unter dem Punkt Aufgaben.<br>
            Unter Bericht steht ihnen der gesamte Werdegang dieser Seite anschaulich zur Verfügung.<br>
            Infos zu meiner Person und meinem persöhnlichen Werdegang finden sie unter About.<br>
            Falls es nach dies allem noch Fragen, Wünsche oder Anmerkungen gibt können sie mich unter
            Kontakt jederzeit per Mail kontaktieren.<br>
            Viel Spaß auf meiner Seite.</span>
  </div>
  <footer class="page-footer font-small cyan darken-3 fixed-bottom">
    <!-- Quelle:https://mdbootstrap.com/education/bootstrap/ -->
    <div class="footer-copyright text-center py-3">
      <img src="damnik_logo.png" width="25" height="25" class="d-inline-block align-top" alt="logo"> © 2019 Copyright: Marvin Damnik
      <a href="#">Impressum</a>
    </div>
  </footer>
</body>

</html>

关于jquery - 文本不淡入/淡出，可能是什么问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57264926/

27 4 0
文章推荐： c++ - Functor 类在构造函数中工作
文章推荐： javascript - jqmath 中如何表示删除线？
文章推荐： javascript - 从 JavaScript 打印一些东西到 HTML/PHP 页面中的表格
文章推荐： javascript - 进入站点时显示div，但单击li时隐藏
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com