Question

我对jQuery比较陌生。我一直在梳理已经回答的问题，但似乎无法找到我的代码有什么问题。

我有一组我在网站上显示的png文件。首先，我使用.fadeIn（）函数，它的工作原理。另一方面，我希望图像从窗口顶部下拉，我正在使用.slideDown（）函数。 fadeIn（）工作正常，但slideDown由于某种原因不对图像做任何事情。我试过设置display：none;在我的CSS中，它似乎仍然没有做到这一点。有人可以帮忙吗？

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <link href="styles.css" type="text/css" rel="stylesheet">

  </head>


  <body>

  <div class="row" id="sky">
    <div class="col-sm-12 col-xs-12 col-sm-offset-0 col-xs-offset-0" > <img src="stars.png" class="img-responsive" alt="Stars" style="position: absolute;" > </div>
    </div>
  </div>

<div class="row">
  <div id="treeline">

    <div class="col-sm-8 col-xs-12 col-sm-offset-2 col-xs-offset-0" > <img src="yard2.png" class="img-responsive" alt="Yard" > </div>
  </div>
</div>

 <div class="row">
   <div id="neighborhood">
      <div id = "tallhouse" class="col-sm-2 col-xs-2 col-sm-offset-1 col-xs-offset-1"> <img src="tallhouseCC.png" class="img-responsive" alt="Tall House" style="position: absolute;"> </div>
      <div class="col-sm-2 col-xs-2" > <img src="greenhouseCC.png" class="img-responsive" alt="Green House" style="position: absolute;"> </div>
      <div class="col-sm-2 col-xs-2" > <img src="centerhouseCC.png" class="img-responsive" alt="Center House" style="position: absolute;"></div>
      <div class="col-sm-2 col-xs-2" > <img src="italianhouseCC.png" class="img-responsive" alt="Italian House" style="position: absolute;"> </div>
      <div class="col-sm-2 col-xs-2" > <img src="tealhouseCC.png" class="img-responsive" alt="Teal House" style="position: absolute;"> </div>

    </div>
  </div>




    <!-- jQuery first, then Bootstrap JS. -->
    <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("#tallhouse").slideDown("slow");
        $("#sky").fadeIn(2000);
      });
    </script>


  </body>
</html>

CSS：

body {
  min-height: 400px;
  padding-top: 5px;
  background-color: #0B0B3B; 
}

.navbar {
   background-color: transparent;
   background: transparent;
   border-color: transparent;
}

.navbar li { color: #000 } 

#tallhouse{
    display: none;
}

#neighborhoodsky{
    min-height: 150px;
}

#neighborhood{
  padding-top: 260px;
  display: none;
}

#sky{
    padding-bottom: 80px;
    display: none;
}

#treeline{
  position: absolute;
  padding-top: 270px;
  min-height: 30px;
  top:-3%;
}

#sky id与#tallhouse id完全相同，所以我不知道它为什么不起作用。我对这个社区还是比较陌生的，所以我理解这可能是一个多余的问题，但我还没有能够通过研究找到解决方案。请不要点亮我lol

jQuery slideDown函数不起作用，但fadeIn不起作用

0 个答案: