时间戳

首页 > 解决方案 > Jquery 代码有时仅适用于 Bootstrap 4

javascript - Jquery 代码有时仅适用于 Bootstrap 4

问题描述

我无法让我的 jquery 代码与我的 Bootstrap 4. div 一起使用。

我的目标是在横幅部分有两个 div（流体引导容器），但是在加载页面约 5 秒时显示一个。然后逐渐淡出，而下一个 div 逐渐淡入。

感谢您的帮助，如果可能的话，请解释为什么我的第二个代码块不起作用。

PS：我知道第二个代码块不代表我的目标，但它应该也可以工作并且没有。

这有效：

setTimeout(
  function() {
    $('#div-a').replaceWith($('#div-b'));
    $('#div-b').show();
  },
  4000
);

但这不起作用：

       setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
});
}, 2000);

在我的 CSS 文件中，我有以下内容：

#div-b {
display: none;
}

在我的 HTML 文件中，我有以下内容：

 <!DOCTYPE html>
    <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



  <title>TEXATREK</title>
</head>
<body>



  <nav class="navbar navbar-expand-md navbar-expand-lg navbar-light bg-light" id="navi">
    <a class="navbar-brand"  href="">
      <img class="brand-logo" src="images/logos/Trexatek_Logo_AND_Name_Gold-Orange.png" alt="">
    </a>

    <!--HAMBURGER Toggler Icon-->
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu" >
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- NAVBAR  -> div BELLOW -->
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav ml-auto mr-5 ">
        <li class="nav-item mr-5"><a class="nav-link" href="">Users</a></li>
        <li class="nav-item mr-5"><a class="nav-link" href="">Products</a></li>
        <li class="nav-item mr-5"><a class="nav-link" href="">Items</a></li>
        <li class="nav-item mr-5"><a class="nav-link" href="">Pigis</a></li>
        <li class="nav-item mr-5"><a class="nav-link" href="">Rolls</a></li>
      </ul>
    </div>
  </nav>

<!-- SECTION 1 -->
 <!--WELLCOME PAGE SECTION-->
  <div id="div-a" class=" mt-2 px-0 pt-05 container-fluid">

    <div class="row">

      <div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <img class="hex-banner img-fluid" src="images/Banner/Hexagon-Banner/Hexagon_Photo_Grid_with_logo_in_middle 1915x615.png" alt="">
      </div>

    </div>

  </div>

<!--REPLACEMENT AFTER 5 SECONDS -- START-->

  <div id="div-b" class=" mt-2 px-0 pt-05 container-fluid">

      <div class="row">

        <div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <h1>SIGN UP NOW BITCHES</h1>
        </div>

      </div>

    </div>

<!--REPLACEMENT AFTER 5 SECONDS -- END-->

  <!-- SECTION 2 -->
  <!--INFORMATION ABOUT TEXATREK 1. US 2.OUR STRENGTH 3. WHY TEXATREK-->
  <div class="container-fluid pt-5">

      <div class="row">

        <div class="mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">

           <!--WHAT WE DO info section-->
           <div class="texatrek-info what-we-do">
              <h2>WHAT WE DO</h2>
              <h3>Our company specializes in sourcing precision components that are manufactured in India by our network of carefully selected, high quality suppliers, all of which are ISO 9001 certified. Our goal is to ensure reliable supplies at competitive costs and with zero defects.</h3>
          </div>
          <!--OUR STRENGTHS info section-->
          <div class="texatrek-info our-strengths">
                <h2>OUR STRENGTH IS YOUR ADVANTAGE</h2>
                <h3> We manage and expand our carefully selected Indian supplier base to meet the ever-growing demand of our customers. By offering a broad selection of manufacturing technologies we are able to support you to meet the challenges you are facing in terms of design and supply chain, that is optimized for manufacturing and thus resulting in reduced unit cost. </h3>
          </div>

          <!--BACKGROUND IMAGE HEXAGONS-->
          <div class="product-background">
            <img class="img-fluid product-background-img" src="images/Background/Background-info_cropped.png" alt="">
          </div>-

        </div>

      </div>

    </div>

<!-- SECTION 3 -->
<!--PRODUCTS AND SERVICES SECTION-->
  <div class="container-fluid pt-5">

    <div class="row">

      <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <img id="products-services" class="img-fluid"src="images\Info_Graphics\Products and Services.png" alt="">
      </div>

      <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <div class="solutions-container">
          <!--THE BLACK IN THE BLUE BLOCK (div)-->
          <div class="solutions-inside">
              <h3 class="solutions text-left">SOLUTIONS SOLUTIONS SOLUTIONS THAT FIT</h3>
            <h5 class="solutions-para text-left">paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</h5>
          </div>
        </div>
      </div>

    </div>

  </div>

  <!-- SECTION 4 -->

  <div class="container-fluid pt-5">

      <div class="row">

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">

        </div>

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">

        </div>

      </div>

    </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="TrexatekNavbar_V3_Bootstrap.css">

  <script>

    $('#div-a').fadeOut('slow').promise().done(function() {
    $('#div-a').replaceWith($('#div-b'));
    $('#div-b').fadeIn('slow');
});

/*    
setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
  $('#div-a').replaceWith($('#div-b'));
  $('#div-b').show();
});

}, 2000);

    setTimeout(
      function() {
        $('#div-a').replaceWith($('#div-b'));
        $('#div-b').show();
      },
      4000
    );
    */

  </script>

</body>
</html>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

推荐阅读