title: Add HTMl to a div when it gets visible using jquery
body: <p>I have following problem:</p>
  
  <p>I added an svg to my website. The SVG includes a circle which i want to be animated. So far so good, the animation on the circle works. Now if the user watches the website on a mobile phone or on a tablet, the animation will already be over when the user reaches the SVG. So i want to make the SVG Appear when the user scrolls down and then add the  class. </p>
  
  <p>I already wrote some code for this, the problem is that my jquery adds the HTML-tag at the beginning and when i scroll down and the SVG appears, the animation is already over.</p>
  
  <p>Here comes the code:</p>
  
  <pre><code>    &lt;div class="col-6"&gt;&lt;svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="120px" height="120px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"&gt;
  &lt;linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="50.002" x2="100" y2="50.002"&gt;
      &lt;stop  offset="0" style="stop-color:#9AC5EB"/&gt;
      &lt;stop  offset="1" style="stop-color:#7AB1E1"/&gt;
  &lt;/linearGradient&gt;
  &lt;path fill="url(#SVGID_1_)" d="M50,0.002V50H0c0,0,0,0.001,0,0.002c0,27.614,22.386,50,50,50s50-22.386,50-50S77.614,0.002,50,0.002
      z"/&gt;
  &lt;linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="154" y1="-134.75" x2="199" y2="-134.75" gradientTransform="matrix(2 0 0 -2 -298 -219.5)"&gt;
      &lt;stop  offset="0" style="stop-color:#322C7A"/&gt;
      &lt;stop  offset="1" style="stop-color:#282B61"/&gt;
  &lt;/linearGradient&gt;
      &lt;circle fill="url(#SVGID_2_)" enable-background="new" cx="50" cy="50" r="40" id="lock"&gt;  
      &lt;/circle&gt;
  &lt;g&gt;
      &lt;g opacity="0.1"&gt;
          &lt;path fill="#010202" d="M30.502,33.454c2.21-0.402,5.274-0.704,9.442-0.704c4.52,0,7.836,0.954,9.994,2.762
              c2.01,1.656,3.314,4.318,3.314,7.482c0,3.214-1.004,5.876-2.912,7.684c-2.46,2.461-6.328,3.614-10.696,3.614
              c-1.156,0-2.21-0.048-3.014-0.2v12.754h-6.126V33.454H30.502z M36.628,49.222c0.754,0.202,1.758,0.25,3.014,0.25
              c4.62,0,7.432-2.258,7.432-6.226c0-3.766-2.612-5.776-6.882-5.776c-1.706,0-2.912,0.152-3.566,0.302v11.45H36.628z"/&gt;
      &lt;/g&gt;
      &lt;g&gt;
  
              &lt;linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="164.1426" y1="-133.3228" x2="184.5285" y2="-133.3228" gradientTransform="matrix(2 0 0 -2 -298 -219.5)"&gt;
              &lt;stop  offset="0" style="stop-color:#9AC5EB"/&gt;
              &lt;stop  offset="1" style="stop-color:#7AB1E1"/&gt;
          &lt;/linearGradient&gt;
          &lt;path fill="url(#SVGID_3_)" d="M30.502,30.802c2.21-0.402,5.274-0.704,9.442-0.704c4.52,0,7.836,0.954,9.994,2.762
              c2.01,1.656,3.314,4.318,3.314,7.482c0,3.214-1.004,5.876-2.912,7.684c-2.46,2.46-6.328,3.615-10.696,3.615
              c-1.156,0-2.21-0.049-3.014-0.201v12.754h-6.126V30.802H30.502z M36.628,46.572c0.754,0.202,1.758,0.25,3.014,0.25
              c4.62,0,7.432-2.258,7.432-6.226c0-3.766-2.612-5.776-6.882-5.776c-1.706,0-2.912,0.152-3.566,0.302v11.45H36.628z"/&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  &lt;g&gt;
      &lt;g opacity="0.1"&gt;
          &lt;path fill="#010202" d="M55.158,61.176c1.41,0.856,4.068,1.756,6.277,1.756c2.713,0,3.918-1.102,3.918-2.709
              c0-1.656-1.004-2.511-4.02-3.568c-4.766-1.656-6.777-4.266-6.729-7.128c0-4.318,3.568-7.684,9.244-7.684
              c2.709,0,5.072,0.704,6.477,1.456l-1.208,4.37c-1.05-0.604-3.011-1.406-5.173-1.406c-2.207,0-3.411,1.056-3.411,2.562
              c0,1.558,1.151,2.31,4.268,3.416c4.419,1.605,6.476,3.867,6.528,7.482c0,4.418-3.464,7.684-9.946,7.684
              c-2.962,0-5.622-0.756-7.432-1.758L55.158,61.176z"/&gt;
      &lt;/g&gt;
      &lt;g&gt;
  
              &lt;linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="164.1426" y1="-135.7368" x2="184.5298" y2="-135.7368" gradientTransform="matrix(2 0 0 -2 -298 -219.5)"&gt;
              &lt;stop  offset="0" style="stop-color:#9AC5EB"/&gt;
              &lt;stop  offset="1" style="stop-color:#7AB1E1"/&gt;
          &lt;/linearGradient&gt;
          &lt;path fill="url(#SVGID_4_)" d="M55.158,58.525c1.41,0.856,4.068,1.757,6.277,1.757c2.713,0,3.918-1.103,3.918-2.71
              c0-1.656-1.004-2.51-4.02-3.568c-4.766-1.656-6.777-4.266-6.729-7.128c0-4.318,3.568-7.684,9.244-7.684
              c2.709,0,5.072,0.704,6.477,1.456l-1.208,4.37c-1.05-0.604-3.011-1.406-5.173-1.406c-2.207,0-3.411,1.056-3.411,2.562
              c0,1.558,1.151,2.31,4.268,3.416c4.419,1.605,6.476,3.868,6.528,7.482c0,4.418-3.464,7.684-9.946,7.684
              c-2.962,0-5.622-0.756-7.432-1.758L55.158,58.525z"/&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  &lt;/svg&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the SVG. Now the ID #lock is the one that i want to animate when the user scrolls down. I tried this:</p>
  
  <pre><code>$(window).scroll( function(){
  
  
  
       if (window.matchMedia('').matches) {
          $('.col-6').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 &gt; bottom_of_object ){
  
                  $(this).animate({opacity:'1'},2000, 'easeInOutQuart');
  
              }   
  
          }); 
          }    
  
      if (window.matchMedia('').matches) {
          $('#lock').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 &gt; bottom_of_object ){
                  $(this).html('&lt;animate attributeType="xml" attributeName="r" from="0" to="40" dur="2s"/&gt;');
  
              }   
  
          }); 
          }      
  
      });
  </code></pre>
  
  <p>The first one works, the DIV appears when i reach it by scrolling. The second one does not work. The HTML is already added on pageload.</p>
  
  <p>Any suggestions?</p>