Устранение неполадок элементов JQuery для эффекта прокрутки окна

Question

Я пытаюсь применить эффект, когда элементы затухают, когда страница прокручивается до уровня, на котором они будут видны.

Чтобы быть конкретным, я пытаюсь настроить табло на вертикальной шкале времени.

Это структура временной шкалы.

<div class="container-fluid when"> 

    <div class="container none"> 
     <div class="title dark">When?</div> 
     <div class="timeline"> 
      <div class="container none"> 

       <!-- BOX START --> 
       <div class="entry fade"> 
        <div class="container-fluid none date-title"> 
         <div class="col-md-6 none">The Pledge</div> 
         <div class="col-md-6 none">November 23rd 2011</div> 
        </div> 

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore repellat omnis esse accusantium, distinctio vel fugit provident quae possimus culpa magni deleniti est, aperiam illo exercitationem dolore, assumenda. Quis.</p> 
        <div class="circle-glyph img-circle"><span class="fa fa-envelope"></span></div> 
       </div> 
      <!-- /BOX END--> 

      </div> 
     </div> 
    </div> 

</div> 

И это будет CSS для большинства из перечисленных выше элементов:

.when{ 
    @extend .what; 
    background:#393F43; 
    color:#ddd; 
    .title{ 
     color:#ddd; 
    } 
    .timeline{ 
    padding:20px; 
    position:relative; 
    color:black; 
     &:before{ 
      content: ""; 
      width:5px; 
      height:100%; 
      background:silver; 
      position: absolute; 
      top:0; 
      left:50%; 
     } 
     .entry{ 
      padding:20px; 
      border-radius:2px; 
      background:#ecf0f1; 
      width:auto; 
      max-width:500px; 
      color:gray; 
      position: relative; 
      margin-top:20px; 
      p{font-size:14px;} 
      &:before{ 
       content: ""; 
       position:absolute; 
       right:0; 
       padding:5px; 
       left:500px; 
       width:35px; 
       height:35px; 
       background: url(../imgs/arrow.png) no-repeat; 
      } 
      .circle-glyph{ 
       background:silver; 
       padding:15px; 
       width:45px; 
       position:absolute; 
       left:545px; 
       top:10px; 
       span{ 
        display:block; 
        text-align:center; 
       } 
      } 
      .date-title{ 
       height:23px; 
       div{ 
        &:nth-child(1){ 
         font-size:15px; 
         font-weight: bold; 

        } 
        &:nth-child(2){ 
         text-align:right; 
         font-style:italic; 
         font-size:11px; 
        } 
       } 
      } 
      &:not(:first-child):nth-child(odd){ 
       margin-top:210px; 
      } 
      &:nth-child(even){ 
       float:right; 
       .circle-glyph{ 
        left:-125px; 
        top:10px; 
       } 
       &:before{ 
       content: ""; 
       position:absolute; 
       right:0; 
       padding:5px; 
       left:-35px; 
       width:35px; 
       height:35px; 
       background: url(../imgs/arrow.png) no-repeat; 
       -moz-transform: scaleX(-1); 
       -o-transform: scaleX(-1); 
       -webkit-transform: scaleX(-1); 
       transform: scaleX(-1); 
       filter: FlipH; 
       -ms-filter: "FlipH"; 
       } 
      } 
     } 
    } 
} 

Который производит следующее: http://piclair.com/data/4xkqg.jpg

В настоящее время в моем script.js файл, у меня есть следующий код, выполняемый на нагрузка документа:

$(window).scroll(function() { 

    /* Check the location of each desired element */ 
    $('.fade').each(function (i) { 

     var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it it */ 
     if (bottom_of_window > bottom_of_object) { 

      $(this).animate({ 
       'opacity': '1' 
      }, 350); 
     } 
    }); 
}); 

^Я не создавал приведенный выше сценарий.

Я проверил его и он прекрасно работает на независимых элементов, например, если я применил его на: <div class="bg-success fade pad-20">Hello</div>

Это не будет работать индивидуально, независимо от того, сколько я применяю эффект на.

Проблема

Проблема у меня в том, что эффект замирания, которые инициированы для каждого <div class="entry fade"> как только один обнаружен скрипт в script.js

Я предполагаю, это как-то связано с тем, как я вложил разные DIV, классы и элементы в целом, но я не совсем уверен.

Помощь очень ценится.

Answer 1

Проблема у меня в том, что эффект замирания, которые инициированы для каждого <div class="entry fade"> как только один обнаружен скрипт в script.js.

Возможно, ваше высказывание, что все они исчезают одновременно. Я сделал сценарий, где они исчезают, когда дно div попадает на определенную отметку для моего примера. Я не знаю, хотите ли вы этого. Я только что изменил position на offset.

$(window).on("scroll", function(){ 
      $(".el").each(function(i){ 
       console.log($(this).offset().top) 
       var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
       var bottom_of_window = $(window).scrollTop() + $(window).height(); 
       $('.display').html("btofWin: " + bottom_of_window + "btmofObj" + bottom_of_object) 
       if(bottom_of_window > bottom_of_object){ 
        $(this).animate({ 
         "opacity" : 1 
        },350) 
       } 
      }) 
     }) 

http://jsfiddle.net/8s1cscq5/

Я изучаю события прокрутки сам.