jQuery查找元素相对于容器

时间：2015-06-14 19:22:45

标签： javascript jquery html css

所以我在创建我的网站时有一点障碍，我需要通过添加动画来增加一些功能，但我似乎无法使这种效果起作用：https://youtu.be/bToBgJYI8Pc。我正在使用一个教程（https://css-tricks.com/slide-in-as-you-scroll-down-boxes/），因为我不知道jQuery，因为我认为我不需要它。我的问题是，似乎jQuery找不到我想要动画的元素的正确位置（它们用position: relative;重新定位）

示例1.这就像jQuery在css之前运行而没有考虑任何样式。

示例2.它就像元素的锚点是它们应该在下面的页面的第4个（我甚至不知道锚点是否存在于css / html / jquery中）

示例3.这是一个GIF，向您展示我的意思。 http://gyazo.com/fe72b683031e88d4247e62ae9e9fe5e8看看'Screamer''Swezii'和'KINZU'下的文字正文

请记住，我是jQuery的新手，所以如果与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 = $(".animated");

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

  });

});
/* 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
}
#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;
}
<!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 src="jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="javascript/animated.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>
        <div class="animated">
          <div class="one-third-column" id="swezii">
          </div>
        </div>
        <div class="animated">
          <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>
        <div class="animated">
          <div class="one-third-column">
            <p id="manager2">Swezii</p>
          </div>
        </div>
        <div class="animated">
          <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 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="seven columns">
            <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>
  </div>
  <!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

</html>

1 个答案:

答案 0 :(得分：0)

我评论了您的定位代码，这似乎是主要问题。 这是css（为了让它在jsfiddle中工作，我添加了一个in-class类：http://jsfiddle.net/kaemgm6y/

我根本不改变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); }
}

我也改变了HTML。我结合了一些div。他们可以在同一个div中有多个类，如下所示：

<div class="animated one-third-column" id="kinzu">

</div>

另一个有帮助的事情是将标题（经理名称和段落放在同一个div中 - 这使得它们几乎不可能错误地将它们放在彼此之上。

这是我改变的HTML（需要更多清理，但你明白了）：

<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>
相关问题
最新问题