动画Div如果可见jQuery

Question

我不知道与jQuery有关的任何信息。 完全陌生的。 当页面滚动并且div出现时，我正在尝试从底部制作带有#animated幻灯片类的div。 我复制了这段代码

 $(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"); } }); }); }); 

通过网站，但代码不起作用。 我什么都没改变。 该代码未执行应做的工作

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

所以我的问题是我在做什么错。 顺便说一句，我的CSS完美无瑕，我知道CSS和HTML，但不像导入这种类型的代码那样一起了解jQuery和HTMl，如果有的话。

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

 /* 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; } 

 <!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> 

Answer 1

在此处更改jQuery中的类： var allMods = $(".module"); 应该是var allMods = $(".animated"); –应该有效。