Twitter Bootstrap Question posted in

Timing item fade_in with JavaScript – Twitter bootstrap

This is the method I am using to fade in certain elements on a page on scroll. Is there a way to add to this by timing the different elements?
Such as:

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

Where item1 fades in, item2 fades in slow, and item3 fades in slower.
I was using something similar to this (minus the button because i am not using one):

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

But couldn’t get it to work in my JS. How can I time each fade in using this?
It looks like its working in this code snippet – but when they are all in a <row> it fades them in all at once.

//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>
Tags:

2

Answers


  1. 0 
    $("button").click(function(){
    $("#div1").fadeIn();
    setTimeout(function(){
        $("#div2").fadeIn("slow");
    }, 1000);
    setTimeout(function(){
        $("#div3").fadeIn(3000);
    }, 2000);
});
    Login or Signup to reply.
  2. 0

    Remove fade_in from your HTML and only add it when you actually want the fade in to happen. Like when you’re removing the faded_out class.

    //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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search