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

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

Answer 2

从HTML中删除fade_in，只有在您确实希望淡入时才添加它。就像您要删除faded_out类一样。

＆＃13;

//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');
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用JavaScript计时项目fade_in

2 个答案: