javascript - $ 在创建变量时未定义

标签 javascript jquery html css

<分区>

对于这个问题,这可能是一个真正简单的答案,但我似乎无法想到它。当你滚动到它时,我试图从底部动画制作一个动画,但是当我检查时,它显示错误,“$ is not defined”这是我的代码。谢谢!

var navopen = false;
function togglenav(){
    
    // document.getElementById('navbody').classList.toggle('w3-animate-zoom');
    // document.getElementById('navbody').classList.toggle('w3-animate-zoomout');
    // document.querySelector("body").classList.toggle('hide');
    document.getElementById("heading").classList.toggle('hide');
    
    // if(document.getElementById("navbody").className == "w3-animate-zoom"){
    //     document.getElementById("navbody").style.display = "block";
    //     document.getElementById("navbody").className = "w3-animate-zoomout";
    // }else if( document.getElementById("navbody").className == "w3-animate-zoomout"){
    //     document.getElementById("navbody").style.display = "none";
    //     document.getElementById("navbody").className = "w3-animate-zoom";
    // }else{
    //     document.getElementById("navbody").style.display = "block";
    //     document.getElementById("navbody").className = "w3-animate-zoom";

    // }
    // if(document.getElementById('navbody').classList.contains('w3-animate-zoomout')){
    //     document.getElementById('navbody').classList.toggle('hide');
    //     document.getElementById('navbody').classList.remove('w3-animate-zoomout');
    //     document.getElementById('navbody').classList.add('w3-animate-zoom');
    //     document.getElementById('navbody').classList.remove("hide");
    //     navopen = true;
    // }else if(document.getElementById('navbody').classList.contains('w3-animate-zoom')){
    //     navopen = false;
        
    //     document.getElementById('navbody').classList.remove('w3-animate-zoom');
    //     document.getElementById('navbody').classList.add('w3-animate-zoomout');
    //     document.getElementById('navbody').classList.add("hide");
        
    // }
    
   
   document.getElementById('navbody').classList.toggle('hide');
   document.body.classList.toggle('idk');
  
    
}
// $(document).ready(function () {
    
// });
// $('#heading').fadeIn(1000).removeClass('hide');
window.setInterval(function(){if(document.body.scrollTop>336){document.getElementById('heading').style.display = 'none';}else{document.getElementById('heading').style.display = "block"}},10);














var $animation_elements = $('.thecard');
var $window = $(window);
$window.on('scroll', check_if_in_view);
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}
body{
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  padding: 0px;
  margin: 0px;
  /* background: url(headingimage.jpg); */
  background-size: cover;
  background-color: rgb(200, 400, 400);

}
html{
  padding: 0px;
  margin: 0px;
  scroll-behavior: smooth;
}
.idk{
  background: url(headingimage.jpg);
  background-size: cover;
}

#headingcontainer {
  line-height: 100%;

  height: 100%;
  /* border: 3px solid green; */
  text-align: center;
  width: 100%;
  background-image: url(headingimage.jpg);
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  /* display: flex;
  position: fixed;
  align-items: center;
  justify-content: center; */
}
#desc{
  text-align: center;
  margin: 50px;
  margin-top: 200px;
  position: relative;
  border: 5px solid red;
  border-top-left-radius: 90px;
  border-bottom-right-radius: 90px;
  margin-left: 50px;
  margin-right: 50px;
  padding: 60px;
  background-color: grey;
}

#heading {
    
    font-size: 50px;
    font-family: 'Rubik Mono One';
    color: white;
    /* position: fixed; */
    z-index: 0;
    position: fixed;

}
#arrowdown{
  /* margin-top: 30px; */
  display: block;
  text-align: center;
  width: 3%;
  text-align: center;
  margin: auto;
  /* margin-top: 1%; */
  border-radius: 100%;
  border: 3px solid white;
 
}
#navbar{
  position: fixed;
  left: .5%;
  top: 2%;
  width: 40px;
  z-index: 100000;
  height: 30px;
  cursor: pointer;
  
 
}
#line1{
  margin-bottom: 10px;
  background-color: red;
  border: 1px solid black;
  width: 100%;
  /* border: 2px solid black;
   */
   border-radius: 90px;
  height: 20%;
  /* z-index: 10000; */
}

#line2{
  margin-bottom: 10px;
  background-color: red;
  border: 1px solid black;
  width: 100%;
  /* border: 2px solid black;
   */
   border-radius: 90px;
  height: 20%;
  /* z-index: 10000; */
}
#line3{
  margin-bottom: 10px;
  border: 1px solid black;
  background-color: red;
  width: 100%;
  /* border: 2px solid black;
   */
   border-radius: 90px;
  height: 20%;
  /* z-index: 10000; */
}
#navbody{
  width: 100%;
  height: 100%;
  position:relative;
  
  /* display: none; */
}
#navback{
  background-color: rgb(59, 55, 55);
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 10000;
  
}
.hide{
  display:none;
  opacity: 1;
}
.navbutton{
  text-align: center;
  width: 20%;
  border-radius: 20px;
  margin: auto;
  padding: 10px;
  cursor:pointer;
  margin-top: 50px;

  background-color: red;
  border: 2px solid black;
}







/*youtube fun!*/
/*Thank you so much Arjun Khara here is his awesome vid: https://www.youtube.com/watch?time_continue=32&v=OV8MVmtgmoY

/* THE MAINCONTAINER HOLDS EVERYTHING */
.maincontainer{
  position: relative;
  width: 320px;
  height: 320px;
  background: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* border-top-left-radius: 90px;
  border-bottom-right-radius: 90px; */
  /* border: 5px solid blue; */
  margin-top: -20px;

}

/* THE CARD HOLDS THE FRONT AND BACK FACES */
.thecard{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 90px;
  border-bottom-right-radius: 90px;
  border: 5px solid red;
  transform-style: preserve-3d;
  transition: all 0.8s ease;
}

/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */
.maincontainer:hover>.thecard{
  transform: rotateY(180deg);
}

/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
 .thefront{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 90px;
  border-bottom-right-radius: 90px;
  backface-visibility: hidden;
  overflow: hidden;
  background:url(pianopic.png);
  background-size: cover;
  color: red;
  vertical-align: middle;

}

/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */
.theback{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 90px;
  border-bottom-right-radius: 90px;
  backface-visibility: hidden;
  overflow: hidden;
  /* background: #fafafa; */
  color: #333;
  
  
  text-align: center;
  transform: rotateY(180deg);
}



/*This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code */
.thefront h1, .theback h1{
  font-family: 'zilla slab', sans-serif;
  padding: 30px;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}

.thefront p, .theback p{
  font-family: 'zilla slab', sans-serif;
  padding: 30px;
  font-weight: normal;
  font-size: 12px;
  text-align: center;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Piano Life</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="icon.png" rel="icon">
    <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="w3.css">
  </head>
  <body class="" id="body">
    <div id="navbar" onclick="togglenav();">
        <div id="line1"></div>
        <div id="line2"></div>
        <div id="line3"></div>
        
    </div>
    <div id="navbody" class="hide">
      <div id="navback">

        <a href="#"><button class="navbutton w3-display-topmiddle" onclick="togglenav();">Home</button></a>
      </div>
    </div>
    <div id="headingcontainer">
    <h1 id="heading" class="w3-display-middle">Piano Life</h1>
    
    
  </div>
  <h1 class="headingdescription">About Us</h1>
  <h2 id="desc">Ever wanted to learn the piano but you just don't know how? Can't get a teacher? Don't have a piano? Thats totally fine! Nobody should be held back from learning to achieve their dreams. So that's why us at <strong>Piano Life</strong>
  </strong>is dedicated to helping you master your instrumental dreams! And by the way, our products are free, and will always be. Check out what we offer below:</h2>
  <div class="maincontainer">

    <div class="thecard">

      <div class="thefront"><h1 class="w3-display-middle2">Online Piano!</h1></div>

      <div class="theback"><h1>Use our online piano, free of cost if you don't have one!</h1></div>
     

    </div>
  </div>

</body>
</html>
                               
    <script src="script.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

它不完全是网站,因为没有图片。如果您认为它们是必要的,请询问!感谢您的帮助!

最佳答案

$ 保存 jQuery 全局变量;在您的脚本中使用它之前,您需要加载 jQuery 库。只需像这样翻转顺序:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>

关于javascript - $ 在创建变量时未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56910606/

上一篇:javascript - 创建这个 javascript 和 css 繁重的元素的最有效方法是什么?

下一篇:html - 如何在 react 中画线

相关文章:

javascript - jQuery - 寻找一个特定的词

javascript - 不可变地更新 react 中的嵌套状态

jquery - 使用jquery更新类名中的动态数字

javascript - 如何一次返回一页(返回到引用页面,而不是它本身)

javascript - 如果按下后退按钮,如何使用户保持在同一页面?

javascript - 如何从 Angular 6 中的组件更新 formArray 的值

javascript - 何时在 famo.us 中使用 #render 方法

jquery - 单选按钮更改事件在 Chrome 或 Safari 中不起作用

javascript - 找到 anchor 并使用 jquery 设置为事件状态

javascript - JS : Target and remove dynamically added element