javascript - 使用 JavaScript 计时元素 fade_in

Question

这是我用来淡入滚动页面上某些元素的方法。有没有办法通过对不同元素进行计时来增加这一点？ 如:

<div id="item1"></div>
  <div id="item2"></div>
    <div id="item3"></div>

其中 item1 淡入，item2 淡入较慢，item3 淡入较慢。 我正在使用类似的东西(减去按钮，因为我没有使用一个):

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

但无法让它在我的 JS 中工作。我怎样才能使用这个来计算每个淡入淡出的时间？ 看起来它在这段代码片段中有效——但当它们都在 <row> 中时它会同时淡化它们。

//script that allows items to fade in on scroll
$(document).ready(function() {

  /* Every time the window is scrolled ... */
  $(window).scroll(function() {
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    /* get the ones that are still faded out but should get visible */
    $('.faded_out').filter(function() {
      return bottom_of_window > $(this).offset().top + $(this).outerHeight();
    }).removeClass('faded_out');
  });
});

/* I am an element that is fading in */

.fade_in {
     opacity: 1;
     transform: none;
     transition: opacity linear 500ms, transform ease 500ms;
}
/* this is the style I am fading in by fading from this style, back to the defaults in .fade_in */

.faded_out.fade_in_from_right {
     opacity: 0;
     transform: translateX(50px);
     -moz-transform: translateX(50px);
     -webkit-transform: translateX(50px);
}
.faded_out.fade_in_from_left {
     opacity: 0;
     transform: translateX(-50px);
     -moz-transform: translateX(-50px);
     -webkit-transform: translateX(-50px);
}
.page-section {
     border-bottom: 1px solid #ddd;
     overflow: hidden;
}

.page-section.page-section-lg {
     padding-top: 50px;
     padding-bottom: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<section class="page-section page-section-lg page-section-no-bd" id="how-ot-works">
  <div class="container">
    <div class="row">
      <div class="col-md-4 faded_out fade_in fade_in_from_left">
        <span class="numbered-list text-faded text-faded-primary">1</span><i class="fa fa-chevron-down fa-2x text-faded text-faded-primary"></i>
        <h4 class="text-dark text-thick">Choose a package</h4>
        <span class="body-text text-info">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
      </div>
      <div class="col-md-4 faded_out fade_in fade_in_from_left">
        <span class="numbered-list text-faded text-faded-medium">2</span><i class="fa fa-chevron-down fa-2x text-faded text-faded-medium"></i>
        <h4 class="text-dark text-thick">Choose a package</h4>
        <span class="body-text text-info">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
      </div>
      <div class="col-md-4 faded_out fade_in fade_in_from_left">
        <span class="numbered-list text-faded text-faded-dark">3</span><i class="fa fa-chevron-down fa-2x text-faded text-faded-dark"></i>
        <h4 class="text-dark text-thick">Choose a package</h4>
        <span class="body-text text-info">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
      </div>
    </div>
  </div>
</section>

Answer 1

从您的 HTML 中删除 fade_in 并仅在您确实希望发生淡入时添加它。就像您要删除 faded_out 类一样。

//script that allows items to fade in on scroll
$(document).ready(function() {

  /* Every time the window is scrolled ... */
  $(window).scroll(function() {
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    /* get the ones that are still faded out but should get visible */
    $('.faded_out').filter(function() {
      return bottom_of_window > $(this).offset().top + $(this).outerHeight();
    }).removeClass('faded_out')
      // Here you do the fade in
      .addClass('fade_in');
  });
});

/* I am an element that is fading in */

.fade_in {
     opacity: 1;
     transform: none;
     transition: opacity linear 500ms, transform ease 500ms;
}
/* this is the style I am fading in by fading from this style, back to the defaults in .fade_in */

.faded_out.fade_in_from_right {
     opacity: 0;
     transform: translateX(50px);
     -moz-transform: translateX(50px);
     -webkit-transform: translateX(50px);
}
.faded_out.fade_in_from_left {
     opacity: 0;
     transform: translateX(-50px);
     -moz-transform: translateX(-50px);
     -webkit-transform: translateX(-50px);
}
.page-section {
     border-bottom: 1px solid #ddd;
     overflow: hidden;
}

.page-section.page-section-lg {
     padding-top: 50px;
     padding-bottom: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<section class="page-section page-section-lg page-section-no-bd" id="how-ot-works">
  <div class="container">
    <div class="row">
      <div class="col-md-4 faded_out fade_in_from_left">
        <span class="numbered-list text-faded text-faded-primary">1</span><i class="fa fa-chevron-down fa-2x text-faded text-faded-primary"></i>
        <h4 class="text-dark text-thick">Choose a package</h4>
        <span class="body-text text-info">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
      </div>
      <div class="col-md-4 faded_out fade_in_from_left">
        <span class="numbered-list text-faded text-faded-medium">2</span><i class="fa fa-chevron-down fa-2x text-faded text-faded-medium"></i>
        <h4 class="text-dark text-thick">Choose a package</h4>
        <span class="body-text text-info">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
      </div>
      <div class="col-md-4 faded_out fade_in_from_left">
        <span class="numbered-list text-faded text-faded-dark">3</span><i class="fa fa-chevron-down fa-2x text-faded text-faded-dark"></i>
        <h4 class="text-dark text-thick">Choose a package</h4>
        <span class="body-text text-info">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</span>
      </div>
    </div>
  </div>
</section>