javascript - 这个动画之后的内容怎么显示？

标签 javascript jquery html

我想在制作完 3s 动画后显示页面内容，但出现错误:Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 在 w.fn.init.val (jquery.min.js:2) 在 galery.html:193。我该如何解决它？？

$(document).ready(function(){
    $("#dropdown").change(function(){
        $('.loader').fadeIn();
        $('.div').hide();
        setTimeout(function () {
            $('.loader').fadeOut();
            $("#" + $(this).val()).show();
        },3000);
    }); 
});

页面有一个链接: https://carsworldro.000webhostapp.com/galery.html

最佳答案

问题是您丢失了超时函数中的“this-context”。解决方案是为其设置一个变量。

var val = $(this).val();


$(document).ready(function() {
  $("#dropdown").change(function() {
    var val = $(this).val();
    $('.loader').fadeIn();
    $(".div").hide();
    setTimeout(function() {
      $('.loader').fadeOut();
      $("#" + val).show();
    }, 3000);
  });
});
.loader {
  border: 16px solid #ff6600;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 48%;
  left: 48%;
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<html lang="ro">

<head>
  <title>Cars World/Gallery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link href="cars_world_image/Luxury_Sports_Car_Front_View-128.png" rel="icon" type="image/x-icon">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <base href="\">
  <link href="cars-world_css/cars_world_gallery.css" rel="stylesheet">
  <link href="baguetteBox.css" rel="stylesheet">
  <script src="baguetteBox.js"></script>
  <style>
    body {
      background: #000;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#scopertenav">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>                        
                            </button>
        <a class="navbar-brand" href="index.html" target="_self">Cars World</a>
      </div>
      <div class="collapse navbar-collapse" id="scopertenav">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="index.html" target="_self">Home</a></li>
          <li class="active"><a href="galery.html">Galerie</a></li>
          <li><a href="cars_video.html" target="_self">Video</a></li>
          <li><a href="documentary.html" target="_self">Documentary</a></li>
          <li><a href="news.html" target="_self">News</a></li>
          <li><a href="#" target="_self">Contact</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <div class="form-group container">
    <select class="form-control" id="dropdown">
      <option>Name of the brands</option>
      <option value="cars1">Acura</option>
      <option value="cars2">Div 2</option>
    </select>
  </div>
  <div class="loader" id="loader"></div>
  <div class="div" id="cars1" style="display: block;">
    <div class="cars_world_sharch_gallery container">
      <h2 class="text-center">Acura ILX</h2>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12  baguetteBoxOne">
          <!--Imaginea_1-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_1.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 1" src="cars_world_image/Acura/Acura_ILX/acura_ilx_1.jpg ">
            </a>
          </div>
          <!--Imaginea_2-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_2.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 2" src="cars_world_image/Acura/Acura_ILX/acura_ilx_2.jpg ">
            </a>
          </div>
          <!--Imaginea_3-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_3.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 3" src="cars_world_image/Acura/Acura_ILX/acura_ilx_3.jpg ">
            </a>
          </div>
          <!--Imaginea_4-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_4.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 4" src="cars_world_image/Acura/Acura_ILX/acura_ilx_4.jpg ">
            </a>
          </div>
          <!--Imaginea_5-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_5.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 5" src="cars_world_image/Acura/Acura_ILX/acura_ilx_5.jpg ">
            </a>
          </div>
          <!--Imaginea_6-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_6.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 6" src="cars_world_image/Acura/Acura_ILX/acura_ilx_6.jpg ">
            </a>
          </div>
          <!--Imaginea_7-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_7.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 7" src="cars_world_image/Acura/Acura_ILX/acura_ilx_7.jpg ">
            </a>
          </div>
          <!--Imaginea_8-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_8.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 8" src="cars_world_image/Acura/Acura_ILX/acura_ilx_8.jpg ">
            </a>
          </div>
          <!--Imaginea_9-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_9.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 9" src="cars_world_image/Acura/Acura_ILX/acura_ilx_9.jpg ">
            </a>
          </div>
          <!--Imaginea_10-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_10.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 10" src="cars_world_image/Acura/Acura_ILX/acura_ilx_10.jpg ">
            </a>
          </div>
          <!--Imaginea_11-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_11.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 11" src="cars_world_image/Acura/Acura_ILX/acura_ilx_11.jpg ">
            </a>
          </div>
          <!--Imaginea_12-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_13.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 12" src="cars_world_image/Acura/Acura_ILX/acura_ilx_13.jpg ">
            </a>
          </div>
          <!--Imaginea_13-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_16.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 13" src="cars_world_image/Acura/Acura_ILX/acura_ilx_16.jpg ">
            </a>
          </div>
          <!--Imaginea_14-->
          <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
            <a href="cars_world_image/Acura/Acura_ILX/acura_ilx_15.jpg ">
              <img class="cars_world_image_gallery" alt="Acura ILX 14" src="cars_world_image/Acura/Acura_ILX/acura_ilx_15.jpg ">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="div" id="cars2" style="display: none;">Div 2</div>
  <div id="baguetteBox-overlay" role="dialog" aria-describedby="baguetteBox-figcaption-0 baguetteBox-figcaption-1 baguetteBox-figcaption-2 baguetteBox-figcaption-3 baguetteBox-figcaption-4 baguetteBox-figcaption-5 baguetteBox-figcaption-6 baguetteBox-figcaption-7 baguetteBox-figcaption-8 baguetteBox-figcaption-9 baguetteBox-figcaption-10 baguetteBox-figcaption-11 baguetteBox-figcaption-12 baguetteBox-figcaption-13"
    aria-labelledby="baguetteBox-figure-0 baguetteBox-figure-1 baguetteBox-figure-2 baguetteBox-figure-3 baguetteBox-figure-4 baguetteBox-figure-5 baguetteBox-figure-6 baguetteBox-figure-7 baguetteBox-figure-8 baguetteBox-figure-9 baguetteBox-figure-10 baguetteBox-figure-11 baguetteBox-figure-12 baguetteBox-figure-13"
    style="display: none; background-color: rgba(0, 0, 0, 0.8);">
    <div id="baguetteBox-slider" style="transition:opacity 0.4s; opacity: 1; transform: translate3d(-1200%, 0px, 0px);">
      <div class="full-image" id="baguette-img-0">
        <figure id="baguetteBox-figure-0"><img alt="Acura ILX 1" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_1.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-1">
        <figure id="baguetteBox-figure-1"><img alt="Acura ILX 2" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_2.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-2">
        <figure id="baguetteBox-figure-2"><img alt="Acura ILX 3" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_3.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-3">
        <figure id="baguetteBox-figure-3"><img alt="Acura ILX 4" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_4.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-4">
        <figure id="baguetteBox-figure-4"><img alt="Acura ILX 5" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_5.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-5">
        <figure id="baguetteBox-figure-5"><img alt="Acura ILX 6" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_6.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-6">
        <figure id="baguetteBox-figure-6"><img alt="Acura ILX 7" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_7.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-7">
        <figure id="baguetteBox-figure-7"><img alt="Acura ILX 8" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_8.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-8">
        <figure id="baguetteBox-figure-8"><img alt="Acura ILX 9" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_9.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-9"></div>
      <div class="full-image" id="baguette-img-10">
        <figure id="baguetteBox-figure-10"><img alt="Acura ILX 11" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_11.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-11">
        <figure id="baguetteBox-figure-11"><img alt="Acura ILX 12" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_13.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-12">
        <figure id="baguetteBox-figure-12"><img alt="Acura ILX 13" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_16.jpg"></figure>
      </div>
      <div class="full-image" id="baguette-img-13">
        <figure id="baguetteBox-figure-13"><img alt="Acura ILX 14" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_15.jpg"></figure>
      </div>
    </div><button class="baguetteBox-button" id="previous-button" aria-label="Previous" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="60"><polyline fill="none" stroke="rgba(255, 255, 255, 0.5)" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4" points="30,10 10,30 30,50" /></svg></button>
    <button class="baguetteBox-button" id="next-button" aria-label="Next" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="60"><polyline fill="none" stroke="rgba(255, 255, 255, 0.5)" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4" points="14,10 34,30 14,50" /></svg></button>
    <button
      class="baguetteBox-button" id="close-button" aria-label="Close" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><g stroke="rgb(160, 160, 160)" stroke-width="4"><line x1="5" y1="5" x2="25" y2="25" /><line x1="5" y1="25" x2="25" y2="5" /></g></svg></button>
  </div>
  <div style="text-align: right;position: fixed;z-index:9999999;bottom: 0; width: 100%;cursor: pointer;line-height: 0;display:block !important;">
    <a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." href="https://www.000webhost.com/?utm_source=000webhostapp&amp;utm_campaign=000_logo&amp;utm_medium=website_carsworldro&amp;utm_content=footer_img" target="_blank"><img alt="www.000webhost.com" src="https://cdn.rawgit.com/000webhost/logo/e9bd13f7/footer-powered-by-000webhost-white2.png"></a>
  </div>
</body>

</html>

关于javascript - 这个动画之后的内容怎么显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52535940/

上一篇：javascript - 将 Laravel 路由参数传递给 JavaScript

下一篇：javascript - 键入时根据输入字段动态更改选择选项

相关文章：

javascript - 如何影响 Canvas 的不同方向？

html - Chrome在服务器上没有声音，但在客户端有

javascript - 如何在提交表单之前获取JSON中的表单所有元素值

javascript - 使用Dalekjs测试工具，当Option标签中没有 "value"属性时，如何在Dropdown(选择元素)中选择Option？

javascript - 带三元组的 Google 闭包编译器 : ERROR - inconsistent return type

javascript - 使用 .innerHTML 创建 div 元素会产生意外结果

javascript - 具有散点图类别命名功能的免费 JavaScript/JQuery

javascript - 如何生成 if 语句的所有可能结果？

javascript - 使用 javascript 和 html 的视频

javascript - jQuery.get 无法在 github 站点上使用 https(甚至请求同一域)

©2024 IT工具网  联系我们