Javascript jQuery查找元素相对于容器的位置
所以我在制作我的网站时遇到了一点障碍，我需要通过添加动画来增加它的趣味性，但我似乎无法让这种效果发挥作用：。我使用的是教程，因为我不知道；我不知道jQuery，因为我认为我不需要它。我的问题是，jQuery似乎没有找到我想要设置动画的元素的正确位置，它们被重新定位为position:relative 例1。这就像jQuery在css之前运行，没有考虑任何样式 例2。这就像元素的锚在页面下面的第四个位置，我甚至不知道锚是否存在于css/html/jquery中 例3。这是一张GIF图，告诉你我的意思。请看“尖叫者”、“斯威齐伊”和“金津”下的正文 请记住，我对jQuery完全是新手，所以如果它与jQuery有关，您需要非常详细地向我解释您所谈论的内容 这是密码 $document.readyfunction{ 功能${ /** *版权所有2012，数字融合 *根据麻省理工学院许可证授权。 * http://teamdf.com/jquery-plugins/license/ * *@作者Sam Sehnert *@desc一个检查元素是否在 *web浏览器的用户可见视口。 *只考虑垂直位置，不考虑水平位置。 */ $.fn.visible=functionpartial{ var$t=$this， $w=$window， viewTop=$w.scrollTop， viewBottom=viewTop+w.height美元， _top=$t.offset.top， _底部=_顶部+$t.高度， compareTop=partial==true？\u底部：\u顶部， compareBottom=部分===真？\u顶部：\u底部； 返回compareBottom=viewTop； }; }jQuery； var-win=$window； var allMods=$.animated； 所有模块各功能，el{ var el=$el； 如果el.visibletrue{ el.ADDClass已可见； } }; win.scrollfunctionevent{ 所有模块各功能，el{ var el=$el； 如果el.visibletrue{ el.AddClassCom-in； } }; }; }; /*管理者*/ /*278像素*/ 经理{ 背景色：rgba255、153、0、0.79； 位置：绝对位置； 左：0px； 顶部：495px； 宽度：100%； } @媒体最小宽度：288px{ 经理{ 顶部：495px； } } @媒体最小宽度：295像素{ 经理{ 顶部：470px； } } @介质最小宽度：350px{ 经理{ 顶部：455px； } } @介质最小宽度：358px{ 经理{ 顶部：460px； } } @媒体最小宽度：364px{ 经理{ 顶部：435px； } } @介质最小宽度：416px{ 经理{ 顶部：410像素； } } @介质最小宽度：450px{ 经理{ 顶部：420px； } } @介质最小宽度：485px{ 经理{ 顶部：400px； } } @介质最小宽度：510px{ 经理{ 顶部：410像素； } } @介质最小宽度：540px{ 经理{ 顶部：420px； } } @介质最小宽度：550px{ 经理{ 顶部：470px； } } @媒体最小宽度：624px{ 经理{ 顶部：450px； } } @介质最小宽度：650px{ 经理{ 顶部：460px； } } @介质最小宽度：671px{ 经理{ 顶部：435px； } } @介质最小宽度：775px{ 经理{ 顶部：410像素； } } @介质最小宽度：850px{ 经理{ 顶部：420px； } } @媒体最小宽度：914px{ 经理{ 顶部：400px； } } h4{ 文本对齐：居中； 字号：500 } 管理者{ 位置：相对位置； 顶部：15px； } 尖叫者， 斯维齐伊， 金祖{ 背景图片：url../images/screamer.png； 背景大小：100%； 宽度：60px； 高度：60px； 边界半径：50%； 边框颜色：rgba255、153、0、0； 保证金：0自动； } 尖叫者{ 边缘顶部：20px； } 斯维齐伊{ 位置：相对位置； 顶部：125px； } 金祖{ 位置：相对位置； 顶部：275px； } 经理1， 经理2， 经理3{ 位置：相对位置； } 经理1{ 顶部：-115px； } 经理1， 经理2， 经理3{ 字号：600 } 经理2{ 顶部：45px； } 经理3{ 顶部：195px； } 文本1{ 位置：相对位置； 顶部：-165px； } 文本2{ 位置：相对位置； 顶部：-50px； } @介质最小宽度：550px{ 文本1， 文本2， 文本3{ 位置：相对位置； 左：50%； 转化：translateX-25%； 文本对齐：居中； } } p{ 保证金：0自动； 文本对齐：居中； } 版本艺术工作室 关于我们 VersionArts是一家私人设计工作室。我们成立于2014年冬天。我们将客户与他们需要的设计师联系起来。我们的目标是通过互联网以合理的价格提供高质量的设计。我们努力给客户留下深刻印象 客户。我们不卖图形或设计。我们卖艺术品和科洛 乌尔斯 我们的经理 尖叫者Javascript jQuery查找元素相对于容器的位置,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我在制作我的网站时遇到了一点障碍，我需要通过添加动画来增加它的趣味性，但我似乎无法让这种效果发挥作用：。我使用的是教程，因为我不知道；我不知道jQuery，因为我认为我不需要它。我的问题是，jQuery似乎没有找到我想要设置动画的元素的正确位置，它们被重新定位为position:relative 例1。这就像jQuery在css之前运行，没有考虑任何样式 例2。这就像元素的锚在页面下面的第四个位置，我甚至不知道锚是否存在于css/html/jquery中 例3。这是一张GIF图，告诉你我的意
Swezii
近津我是一个喜欢把脑子里想的东西写在纸上的人。我有一些很棒的主意会让你大吃一惊！准备好
我喜欢各种各样的艺术！。我的目标是自己成为一名更好的设计师，这样我就可以与他人分享我的知识。就我的价格而言，我是最好的设计师之一
我就是那个在电脑上发冷的家伙，为你创造了奇妙的艺术。你可以打赌你会得到你想要的
我注释掉了你的定位码，这似乎是主要问题。 下面是我在come-in类中添加的css，以使其在JSFIDLE中工作： 我根本不改变javascript。这是我使用的css文件 此外，我还为视觉/调试效果添加了边框-您可以稍后删除这些边框
/* Managers */
/* 278 PX */
#managersbg {
background-color: rgba(255, 153, 0, 0.79);
position: absolute;
left: 0px;
top: 495px;
width: 100%;
}
@media (min-width: 288px) {
#managersbg {
top: 495px;
}
}
@media (min-width: 295px) {
#managersbg {
top: 470px;
}
}
@media (min-width: 350px) {
#managersbg {
top: 455px;
}
}
@media (min-width: 358px) {
#managersbg {
top: 460px;
}
}
@media (min-width: 364px) {
#managersbg {
top: 435px;
}
}
@media (min-width: 416px) {
#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: 470px;
}
}
@media (min-width: 624px) {
#managersbg {
top: 450px;
}
}
@media (min-width: 650px) {
#managersbg {
top: 460px;
}
}
@media (min-width: 671px) {
#managersbg {
top: 435px;
}
}
@media (min-width: 775px) {
#managersbg {
top: 410px;
}
}
@media (min-width: 850px) {
#managersbg {
top: 420px;
}
}
@media (min-width: 914px) {
#managersbg {
top: 400px;
}
}
h4 {
text-align: center;
font-weight: 500
}
h2{
text-align:center;
}
div.animated{
border-width:1px;
border-style:solid;
}
#managers {
position: relative;
top: 15px;
}
#screamer,
#swezii,
#kinzu {
background-image: url(../images/screamer.png);
background-size: 100%;
width: 60px;
height: 60px;
border-radius: 50%;
border-color: rgba(255, 153, 0, 0);
margin: 0 auto;
}
/*#screamer {
margin-top: 20px;
}
#swezii {
position: relative;
top: 125px;
}
#kinzu {
position: relative;
top: 275px;
}
#manager1,
#manager2,
#manager3 {
position: relative;
}*/
/*#manager1 {
top: -115px;
}
#manager1,
#manager2,
#manager3 {
font-weight: 600
}
#manager2 {
top: 45px;
}
#manager3 {
top: 195px;
}*/
/*#text1 {
position: relative;
top: -165px;
}
#text2 {
position: relative;
top: -50px;
}*/
@media (min-width: 550px) {
#text1,
#text2,
#text3 {
position: relative;
left: 50%;
/*transform: translateX(-25%);*/
text-align: center;
}
}
p {
margin: 0 auto;
text-align: center;
}
.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); }
}
<div class="animated one-third-column" id="kinzu">
</div>
<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 one-third-column" id="screamer">
</div>
<div class="animated one-third-column" id="swezii">
</div>
<div class="animated one-third-column" id="kinzu">
</div>
</div>
<div class="row">
<div class="animated">
<div class="one-third-column">
<h2 id="manager1">Screamer</h2>
<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="one-third-column">
<h2 id="manager2">Swezii</h2>
<p id="text2">I love the fliudity of art, of any kind!. It is my goal to become a bettter designer myself so I can share my knowldge with others. I am one of the best designers for my price.</p>
</div>
</div>
<div class="animated">
<div class="one-third-column">
<h2 id="manager3">KINZU</h2>
<p id="text3">I'm that guy chilling on his computer, creating fantastic art for you. You can bet you'll get what you ask for!</p>
</div>
</div>
</div>
<div class="row">
<div class="animated">
<div class="seven columns">
</div>
</div>
<div class="animated">
<div class="seven columns">
</div>
</div>
<div class="animated">
<div class="seven columns">
</div>
</div>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>