jQuery在CSS中重新定位之前查找元素位置

时间：2015-06-14 04:14:28

标签： javascript jquery html css animation

我试图在页面向下滚动时将重新定位的元素设置为动画，并且它们变得可见。我的问题是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");
      }
    });

  });

});
/* Slide In */

* {
  @include box-sizing(border-box);
}
.animated {} .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);
  }
}
/* Positioned Elements */

/* 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;
  position: relative;
  top: 5px;
}
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 */

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

1 个答案:

答案 0 :(得分：0)

听起来你想在滚动动画结束后调用重定位功能。

这是我用来检测动画结束然后在完成之后触发一些JQuery / Javascript的小技巧。 

  doSomeFunction: function() {
     //do something now animation has ended
  },
  slideOut: function() {
    var elem = $('div.message-text');

    // set up some function to call - 'this' will be the events 'this' 
    // so take a reference to this used here
    var self = this;
    var func = function() {
      self.doSomeFunction();
    };

    // Set up what happens when the animation ends - will run ONE time only
    elem.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', func);

    // Add Animation now
    elem.addClass('fadeInLeft');
  },
相关问题
最新问题