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

Question

我正在尝试让重新定位的元素在页面向下滚动并且它们变得可见时进行动画处理。我的问题是 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>

Answer 1

听起来你想在滚动动画结束后调用重新定位函数。

这是我用来检测动画结束并在结束后触发一些 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');
  },