title: Jquery removeClass - addClass within a section
body: <p>I have a div (<code>#my-div</code>) and an element in it (<code>#element</code>). The element is invisible at origin. I would like that when <code>my-div</code> is on the screen, the element becomes visible and when we leave up or down, the element becomes invisible again.</p>
  
  <p>I use a script and it works when I scroll first down up to my-div but when I scroll downer or I scroll upper, the element remains visible, no further animation happens.</p>
  
  <p>I use CSS for the transition.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;section&gt;
      &lt;div id="whatever"&gt;It is just a DIV&lt;/div&gt;
      &lt;div id="my-div"&gt;My DIV     
          &lt;div id="element" class="invisible"&gt;The element&lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>section {
      width:100%;
      min-height: 4000px;
      text-align: center;
      background-color: #e0e0e0;
  }
  #whatever {
      width: 80%;
      height: 500px;
      margin: 10%;
      background-color: #d0d0d0;
  }
  #my-div {width: 80%;
      height: 300px;
      margin: 10%;
      background-color: grey;
  }
  #element {
      width: 80%;
      height: 100px;
      background-color: red;
      -webkit-transition: all 1500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
      -webkit-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
       -moz-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
       -ms-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
       -o-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
       transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
  }
  .invisible {
      opacity: 0;
  }
  .visible {
      opacity: 1;
  }
  </code></pre>
  
  <p>The jQuery script:</p>
  
  <pre><code>$(window).scroll(function(){            
      if ($(window).scrollTop() &lt;= $('#my-div').offset().top) {
          $('#element').removeClass('invisible').addclass('visible');
      }
      if ($(window).scrollTop() &gt; $('#my-div').offset().bottom) {
          $('#element').removeClass('invisible').addclass('visible');
      }
      else {
          $('#element').removeClass('visible').addclass('invisible');
      }
  });
  </code></pre>
  
  <p>The fiddle to see it live: <a href="http://jsfiddle.net/igorlaszlo/u0tzu02b/" rel="nofollow">http://jsfiddle.net/igorlaszlo/u0tzu02b/</a></p>