动画Div如果可见jQuery

Question

我不知道任何与jQuery相关的信息。完全是新的。当页面滚动并且div进入视图时，我试图从底部创建一个#animated类幻灯片的div。我复制了这段代码

＆＃13;

＆＃13;

$(document).ready(function() {

  (function($) {

    /**
     * Copyright 2012, Digital Fusion
     * Licensed under the MIT license.
     * http://teamdf.com/jquery-plugins/license/
     *
     * @author Sam Sehnert
     * @desc A small plugin that checks whether elements are within
     *     the user visible viewport of a web browser.
     *     only accounts for vertical position, not horizontal.
     */

    $.fn.visible = function(partial) {

      var $t = $(this),
        $w = $(window),
        viewTop = $w.scrollTop(),
        viewBottom = viewTop + $w.height(),
        _top = $t.offset().top,
        _bottom = _top + $t.height(),
        compareTop = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;

      return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

    };

  })(jQuery);

  var win = $(window);

  var allMods = $(".module");

  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("already-visible");
    }
  });

  win.scroll(function(event) {

    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("come-in");
      }
    });

  });

});

＆＃13;

＆＃13;

＆＃13;

来自网站，但代码不起作用。我根本没有改变任何东西。代码不会执行supposed to do

所以现在我不知道该怎么做。我下载了jQuery库并将其与 script 链接，然后又回到了我的主要版本 .js文件。我的文本编辑器（Adobe Brackets）给了我错误（其中50个）

所以我的问题是我做错了什么。 BTW我的CSS完美无缺，我知道CSS和HTML，但是如果有意义的话，就像导入那种类型的代码一样不了解jQuery和HTMl。

编辑：我的HTML和CSS如果你需要它。

＆＃13;

＆＃13;

/* Slide In */

@import "compass/css3";
 * {
  @include box-sizing(border-box);
}
.animated {
  overflow: hidden;
}
.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}
@keyframes come-in {
  to {
    transform: translateY(0);
  }
}
/* Background */

#background {
  position: fixed;
  top: 0;
  left: 0;
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
  z-index: -2;
}
/* Header */

#headerbg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: rgba(255, 153, 0, 0.79);
}
#header {
  width: 100%;
  padding-top: 15px;
}
@media (min-width: 550px) {
  /* Header */
  #header {
    margin-left: 10%;
    position: relative;
    margin-top: 28px;
    padding-bottom: 40px;
  }
}
@media (min-width: 730px) {
  #header {
    margin-top: 25px;
  }
}
@media (min-width: 900px) {
  #header {
    margin-top: 15px;
  }
}
@media (min-width: 1000px) {
  #header {
    margin-left: 20%;
  }
}
/* Navigation */

nav {
  position: relative;
  width: 100%;
  text-align: center;
  padding-top: 10px;
}
nav li {
  display: inline;
  /* Makes links on the same line */
}
nav a {
  margin: 0 5px;
  /* Space out the words */
  color: #151413;
  font-size: 1.3rem;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.125em;
  transition: border-bottom-color 0.75s linear 0s;
  font-weight: 600;
}
@media (min-width: 350px) {
  nav a {
    font-size: 1.4rem;
    margin: 0 12px;
  }
}
@media (min-width: 550px) {
  nav a {
    font-size: 1.2rem;
  }
  nav {
    padding-top: 48px;
  }
}
@media (min-width: 600px) {
  nav a {
    font-size: 1.3rem;
  }
  nav {
    padding-top: 52px;
  }
}
@media (min-width: 650px) {
  nav a {
    font-size: 1.4rem;
  }
}
@media (min-width: 1000px) {
  nav a {
    margin: 0 15px;
  }
  nav {
    padding-top: 56px;
  }
}
@media (min-width: 1000px) {
  nav {
    margin-right: 20%;
  }
}
nav a:hover,
nav a.active {
  border-bottom-color: #151413;
  color: #151413;
}
nav ul {
  list-style-type: none;
  list-style: none;
}
/* About */

.container2 {
  position: relative;
  top: 140px;
  z-index: -1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (min-width: 350px) {
  .container2 {
    top: 145px;
  }
}
@media (min-width: 360px) {
  .container2 {
    top: 150px;
  }
}
@media (min-width: 450px) {
  .container2 {
    top: 160px;
  }
}
@media (min-width: 510px) {
  .container2 {
    top: 170px;
  }
}
@media (min-width: 540px) {
  .container2 {
    top: 180px;
  }
}
@media (min-width: 550px) {
  .container2 {
    top: 130px;
  }
}
@media (min-width: 650px) {
  .container2 {
    top: 140px;
  }
}
@media (min-width: 850px) {
  .container2 {
    top: 150px;
  }
}
@media (min-width: 1100px) {
  .container2 {
    top: 155px;
  }
}
#about {
  text-align: center;
}
p {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 550px) {
  p {
    width: 50%;
  }
}
#aboutbar {
  background-color: #151413;
  height: 5px;
  margin-top: 20px;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 100%
}
@media (min-width: 550px) {
  #aboutbar {
    background-color: #151413;
    height: 5px;
    width: 56.6666666667%;
    margin-top: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
/* Managers */

#managersbg {
  position: absolute;
  left: 0px;
  top: 475px;
  z-index: -1;
  width: 100%;
  background-color: rgba(255, 153, 0, 0.79)
}
@media (min-width: 340px) {
  #managersbg {
    top: 445px;
  }
}
@media (min-width: 350px) {
  #managersbg {
    top: 450px;
  }
}
@media (min-width: 360px) {
  #managersbg {
    top: 455px;
  }
}
@media (min-width: 365px) {
  #managersbg {
    top: 435px;
  }
}
@media (min-width: 417px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 450px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 485px) {
  #managersbg {
    top: 400px;
  }
}
@media (min-width: 510px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 540px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 550px) {
  #managersbg {
    top: 475px;
  }
}
@media (min-width: 624px) {
  #managersbg {
    top: 455px;
  }
}
@media (min-width: 650px) {
  #managersbg {
    top: 460px;
  }
}
@media (min-width: 674px) {
  #managersbg {
    top: 435px;
  }
}
@media (min-width: 778px) {
  #managersbg {
    top: 415px;
  }
}
@media (min-width: 850px) {
  #managersbg {
    top: 425px;
  }
}
@media (min-width: 914px) {
  #managersbg {
    top: 405px;
  }
}
@media (min-width: 1100px) {
  #managersbg {
    top: 410px;
  }
}
#screamer,
#swezii,
#kinzu {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, 0);
  background-image: url(../images/screamer.png);
  background-size: 100%;
  margin: 0 auto;
}
#screamer {
  margin-bottom: 150px;
}
#swezii {
  margin-bottom: 150px;
}
h4 {
  text-align: center;
}
#managers {
  margin-top: 20px;
  margin-bottom: 30px;
}
#manager1,
#manager2,
#manager3 {
  position: relative;
  display: inline-block;
  text-align: center;
}
#manager1 {
  top: -410px;
}
#manager2 {
  top: -220px;
}
#manager3 {
  top: -60px;
}
@media (min-width: 550px) {
  #manager1,
  #manager2,
  #manager3 {
    left: 50%;
    transform: translateX(-50%);
  }
}
#text1,
#text2 {
  margin-bottom: 110px;
}
#text1,
#text2,
#text3 {
  text-align: center;
  position: relative;
}
#text1 {
  top: -450px;
}
#text2 {
  top: -420px;
}
#text3 {
  top: -370px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>TheVersionArts Studio</title>
  <meta name="description" content="TheVersionArts is a private design studio. We provide clients with quality design at a small cost.">
  <meta name="author" content="TheVersionArts">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700' rel='stylesheet' type='text/css'>

  <!-- CSS
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/base.css">

  <!-- Favicon
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

  <!-- Scripts
	-------------------------------------------------- -->
  <script type="text/javascript" src="main.js"></script>
  <script src="main.js"></script>


</head>

<body>

  <!-- Primary Page Layout
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <img src="images/bg.png" id="background">

  <div id="headerbg">
    <div class="container">
      <div class="row">
        <div class="five columns">
          <img src="images/thv-header.png" id="header">
        </div>
        <div class="seven columns">
          <nav>
            <ul>
              <li><a href="#about">About</a>
              </li>
              <li><a href="#contact">Contact</a>
              </li>
              <li><a href="#designers">Designers</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div id="aboutbg">
    <div class="container2">
      <div class="row">
        <div class="twelve columns">
          <h4 id="about">About Us</h4>
        </div>
        <div class="animated">
          <div class="twelve columns">
            <p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our
              clients. We don't sell graphics, or designs. We sell art and colours.</p>
          </div>
        </div>
        <div class="animated">
          <div class="seven columns" id="aboutbar"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="managersbg">
    <div class="container3">
      <div class="row">
        <div class="animated">
          <h4 id="managers">Our Managers</h4>
        </div>
      </div>
      <div class="row">
        <div class="animated">
          <div class="one-third-column" id="screamer">
          </div>
          <div class="one-third-column" id="swezii">
          </div>
          <div class="one-third-column" id="kinzu">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="animated">
          <div class="one-third-column">
            <p id="manager1">Screamer</p>
          </div>
          <div class="one-third-column">
            <p id="manager2">Swezii</p>
          </div>
          <div class="one-third-column">
            <p id="manager3">KINZU</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="animated">
          <div class="seven columns">
            <p id="text1">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
          </div>
        </div>
        <div class="animated">
          <div class="seven columns">
            <p id="text2">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
          </div>
        </div>
        <div class="animated">
          <div class="seven columns">
            <p id="text3">I'm that guy chilling on his computer, creating fantastic art for you.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在这里更改jQuery中的类：var allMods = $(".module");应为var allMods = $(".animated"); - 这应该有效。