title: jQuery Placeholder Animation
body: <p>I have an HTML Form that currently has an empty placeholder value.</p>
  
  <p><code>TypingEffect()</code> randomly selects one of eight examples and then calls <code>type()</code> to type them out as the placeholder. Then, after an interval of 2000, it applies an erasing effect that will erase it.</p>
  
  <p>I think my problem lies within my syntax, more specifically the <code>TypingEffect()</code> function but I can't figure it out.</p>
  
  <p><strong><a href="https://jsfiddle.net/uxftux9w/" rel="nofollow">FIDDLE</a></strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form action="" method="get" type="search"&gt;
        &lt;input type="text" class="textbox" placeholder='' /&gt;    
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Javascript + jQuery:</strong></p>
  
  <pre><code>$(document).ready(function() {
      setInterval ('cursorAnimation', 600);
      textbox = $('.textbox');
  
      setInterval ('TypingEffect', 600);
      setInterval ('ErasingEffect', 2000);
  });
  
  function TypingEffect() {
      var tag = Math.floor((Math.random() * 10) + 1);
      if (tag = 1) { caption = "Example1" }
      if (tag = 2) { caption = "Example2" }
      if (tag = 3) { caption = "Example3" }
      if (tag = 4) { caption = "Example4" }
      if (tag = 5) { caption = "Example5" }
      if (tag = 6) { caption = "Example6" }
      if (tag = 7) { caption = "Example7" }
      if (tag = 8) { caption = "Example8" }
      type();
  }
  
  function type() {
      textbox.attr("placeholder", (caption.substr(0, captionLength++)));
      if(captionLength &lt; caption.length+1) {
          setTimeout('type()', 50);
      } else {
          captionLength = 0;
          caption = '';
      }
  }
  
  function ErasingEffect() {
      caption = captionEl.html();
      captionLength = caption.length;
      if (captionLength&gt;0) {
          erase();
      }
  }
  
  function erase() {
      textbox.attr("placeholder",(caption.substr(0, captionLength--)));
      if(captionLength &gt;= 0) {
          setTimeout('erase()', 50);
      } else {
          captionLength = 0;
          caption = '';
      }   
  }
  </code></pre>