在初始页面加载和滚动时运行jQuery函数

时间：2017-11-13 23:37:59

标签： javascript jquery css

我正在进行一项设计工作，当我们看到窗户时，我想从侧面做几个方块"slide in"。我在网上学习了一些教程之后才开始工作，但只有当元素不在视图中并向下滚动页面才能看到它们时它才会起作用。我想要做的是当页面最初加载时，元素也“滑动”。我觉得这可能是太多的代码，只是发布在这里，所以我把所有东西添加到一个小提琴。

/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {

  //window and animation items
  var animation_elements = $.find('.animation-element');
  var web_window = $(window);

  //check to see if any animation containers are currently in view
  function check_if_in_view() {
    //get current window information
    var window_height = web_window.height();
    var window_top_position = web_window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    //iterate through elements to see if its in view
    $.each(animation_elements, function() {

      //get the elements information
      var element = $(this);
      var element_height = $(element).outerHeight();
      var element_top_position = $(element).offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
        element.addClass('in-view');
      } else {
        element.removeClass('in-view');
      }
    });

  }

  //on or scroll, detect elements in view
  $(window).on('scroll resize', function() {
    check_if_in_view()
  })
  //trigger our scroll event on initial load
  $(document).ready('scroll');

});
.container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.row {
  border-bottom: solid 1px transparent;
  margin-bottom: 2em;
}

.row>* {
  float: left;
}

.row:after,
.row:before {
  content: '';
  display: block;
  clear: both;
  height: 0;
}

.row.uniform>*> :first-child {
  margin-top: 0;
}

.row.uniform>*> :last-child {
  margin-bottom: 0;
}

.wrapper {
  padding: 1em 0em 4em;
}

.profiles {
  margin-bottom: 4em;
  padding-top: 4em;
  background-color: #fff;
  height: 200px;
}

.profile {
  width: 24%;
  height: 100px;
  margin-bottom: 2em;
  margin-right: 2px;
  text-align: center;
  background-color: #666;
  border: 1px solid #000;
  color: black;
}

.animation-element {
  opacity: 0;
  position: relative;
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-150px, 0px, 0px);
  -webkit-transform: translate3d(-150px, 0px, 0px);
  -o-transform: translate(-150px, 0px);
  -ms-transform: translate(-150px, 0px);
  transform: translate3d(-150px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


/*animation element sliding right*/

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(150px, 0px, 0px);
  -webkit-transform: translate3d(150px, 0px, 0px);
  -o-transform: translate(150px, 0px);
  -ms-transform: translate(150px, 0px);
  transform: translate3d(150px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
  <div class="container">
    <section class="profiles">
      <div class="row">
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-right">
        </section>
        <section class="profile animation-element slide-right">
        </section>
      </div>
    </section>
  </div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

我一直在玩的代码位于位的底部，但我改变的任何内容似乎都没有效果。

 //trigger our scroll event on initial load
$(document).ready('scroll');

但我承认我对此知之甚少，而且我只是在线学习教程和示例。在小提琴上，如果向下滚动并向后滚动，您将看到框滑入视图。我想要做的是让它们在初始页面加载时滑入，同时向下滚动页面（我在完整版本的页面下方的其他元素上使用相同的代码）。

感谢任何可以帮助我的人！

3 个答案:

答案 0 :(得分：1)

将您的函数作为对事件侦听器和ready()

的引用 
$(window).on('scroll resize', check_if_in_view);

$(document).ready(check_if_in_view);

答案 1 :(得分：0)

https://api.jquery.com/ready/

  

描述：指定在DOM完全加载时要执行的函数。

你不能只传入"scroll"，因为那不是一个功能。您可以做的是最后致电$(window).trigger('scroll')，或$(document).ready(check_if_in_view)，check_if_in_view是一个功能。

/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {

  //window and animation items
  var animation_elements = $.find('.animation-element');
  var web_window = $(window);

  //check to see if any animation containers are currently in view
  function check_if_in_view() {
    //get current window information
    var window_height = web_window.height();
    var window_top_position = web_window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    //iterate through elements to see if its in view
    $.each(animation_elements, function() {

      //get the elements information
      var element = $(this);
      var element_height = $(element).outerHeight();
      var element_top_position = $(element).offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
        element.addClass('in-view');
      } else {
        element.removeClass('in-view');
      }
    });

  }

  //on or scroll, detect elements in view
  $(window).on('scroll resize', function() {
    check_if_in_view()
  })
  //trigger our scroll event on initial load
  $(window).trigger('scroll');
});
.container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.row {
  border-bottom: solid 1px transparent;
  margin-bottom: 2em;
}

.row>* {
  float: left;
}

.row:after,
.row:before {
  content: '';
  display: block;
  clear: both;
  height: 0;
}

.row.uniform>*> :first-child {
  margin-top: 0;
}

.row.uniform>*> :last-child {
  margin-bottom: 0;
}

.wrapper {
  padding: 1em 0em 4em;
}

.profiles {
  margin-bottom: 4em;
  padding-top: 4em;
  background-color: #fff;
  height: 200px;
}

.profile {
  width: 24%;
  height: 100px;
  margin-bottom: 2em;
  margin-right: 2px;
  text-align: center;
  background-color: #666;
  border: 1px solid #000;
  color: black;
}

.animation-element {
  opacity: 0;
  position: relative;
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-150px, 0px, 0px);
  -webkit-transform: translate3d(-150px, 0px, 0px);
  -o-transform: translate(-150px, 0px);
  -ms-transform: translate(-150px, 0px);
  transform: translate3d(-150px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


/*animation element sliding right*/

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(150px, 0px, 0px);
  -webkit-transform: translate3d(150px, 0px, 0px);
  -o-transform: translate(150px, 0px);
  -ms-transform: translate(150px, 0px);
  transform: translate3d(150px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
  <div class="container">
    <section class="profiles">
      <div class="row">
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-right">
        </section>
        <section class="profile animation-element slide-right">
        </section>
      </div>
    </section>
  </div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

答案 2 :(得分：0)

你几乎就在那里......所有你需要做的就是在所有html准备就绪时触发你的check_if_in_view功能 - 这只是意味着通过名字将函数传递给你上一次document.ready来电。你的代码片段适用于那个调整。

对于一些一般性的建议，我不会尝试＆＃34;假的＆＃34;滚动事件只是为了触发其他行为 - 稍后可能会对更改造成混淆。你真正想要的是在pageload之后立即运行你的自定义函数，jquery会让你做到这一点。

＆＃13;
＆＃13; 
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {

  //window and animation items
  var animation_elements = $.find('.animation-element');
  var web_window = $(window);

  //check to see if any animation containers are currently in view
  function check_if_in_view() {
    //get current window information
    var window_height = web_window.height();
    var window_top_position = web_window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    //iterate through elements to see if its in view
    $.each(animation_elements, function() {

      //get the elements information
      var element = $(this);
      var element_height = $(element).outerHeight();
      var element_top_position = $(element).offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
        element.addClass('in-view');
      } else {
        element.removeClass('in-view');
      }
    });

  }

  //on or scroll, detect elements in view
  $(window).on('scroll resize', function() {
    check_if_in_view()
  })
  //trigger our scroll event on initial load
  $(document).ready(check_if_in_view);

});
＆＃13; 
.container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.row {
  border-bottom: solid 1px transparent;
  margin-bottom: 2em;
}

.row>* {
  float: left;
}

.row:after,
.row:before {
  content: '';
  display: block;
  clear: both;
  height: 0;
}

.row.uniform>*> :first-child {
  margin-top: 0;
}

.row.uniform>*> :last-child {
  margin-bottom: 0;
}

.wrapper {
  padding: 1em 0em 4em;
}

.profiles {
  margin-bottom: 4em;
  padding-top: 4em;
  background-color: #fff;
  height: 200px;
}

.profile {
  width: 24%;
  height: 100px;
  margin-bottom: 2em;
  margin-right: 2px;
  text-align: center;
  background-color: #666;
  border: 1px solid #000;
  color: black;
}

.animation-element {
  opacity: 0;
  position: relative;
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-150px, 0px, 0px);
  -webkit-transform: translate3d(-150px, 0px, 0px);
  -o-transform: translate(-150px, 0px);
  -ms-transform: translate(-150px, 0px);
  transform: translate3d(-150px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


/*animation element sliding right*/

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(150px, 0px, 0px);
  -webkit-transform: translate3d(150px, 0px, 0px);
  -o-transform: translate(150px, 0px);
  -ms-transform: translate(150px, 0px);
  transform: translate3d(150px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
  <div class="container">
    <section class="profiles">
      <div class="row">
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-left">
        </section>
        <section class="profile animation-element slide-right">
        </section>
        <section class="profile animation-element slide-right">
        </section>
      </div>
    </section>
  </div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题