javascript - jQuery Finds Elements Position Before Repositioned in CSS -


i trying repositioned elements animate when page scrolls down , become visible. problem jquery using first (before being positioned) position trigger animation, element higher on page when scroll, see element , continue scrolling little animation triggered. how can make jquery find re-positioned position , use animate instead of position before element positioned? here code.

$(document).ready(function() {      (function($) {        /**       * copyright 2012, digital fusion       * licensed under mit license.       * http://teamdf.com/jquery-plugins/license/       *       * @author sam sehnert       * @desc small plugin checks whether elements within       *     user visible viewport of web browser.       *     accounts 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 {    {      transform: translatey(0);    }  }  /* positioned elements */    /* */    .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 private design studio. founded in winter of 2014. connect clients designers need. our goal serve high quality design @ affordable price through internet. strive impress our clients.        don't sell graphics, or designs. sell art , 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 guy loves things in head onto paper. have great ideas blow minds! ready!</p>          </div>        </div>        <div class="animated">          <div class="seven columns">            <p id="text2">i love fliudity of art, of kind!. goal become bettter designer myself can share knowldge others. 1 of best designers price.</p>          </div>        </div>        <div class="animated">          <div class="seven columns">            <p id="text3">i'm guy chilling on computer, creating fantastic art you. can bet you'll ask for!</p>          </div>        </div>

sounds want call reposition function after scroll animation has ended.

here's little trick use detecting end of animation , triggering bit of jquery / javascript after has done. 

  dosomefunction: function() {      //do animation has ended   },   slideout: function() {     var elem = $('div.message-text');      // set function call - 'this' events 'this'      // take reference used here     var self = this;     var func = function() {       self.dosomefunction();     };      // set happens when animation ends - run 1 time     elem.one('webkitanimationend mozanimationend msanimationend oanimationend animationend', func);      // add animation     elem.addclass('fadeinleft');   },

Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more