0
我不知道任何与jQuery有关的线索。这完全是新的。当页面滚动并且div进入视图时，我想从底部向下滑动#animated类的div。我复制此代码Animate Div如果可见jQuery
$(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");
}
});
});
});从一个网站，但该代码不起作用。我根本没有改变任何东西。代码没有做它是什么supposed to do
所以现在我不知道该怎么做。我下载了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
\t -------------------------------------------------- -->
<script type="text/javascript" src="main.js"></script>
<script src="main.js"></script>
</head>
<body>
<!-- Primary Page Layout
\t –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<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>
因此，我只将.module改为.animated，我删除了.module，因为它看起来只是CSS中的样式。和。动画类曾经是。部分 – DatScreamer
这没有奏效。我只将.module改为.animated。 – DatScreamer
那么，代码的作用是：它查找每个类为'.module'的元素，并且只和它们一起工作。所以你需要告诉浏览器不要查找'.module'，而是'.animated'。这将做到这一点。检查这个Codepen（或通过检查员的源代码），滚动时将附加类：http://codepen.io/HerrBertling/pen/rVwXew – HerrBertling