title: Can't animate letters (wrapped with span tag) inside the DIV with jQuery animate method
body: <pre><code>var letter = $("div#text").children().first();
  letter.animate({
      opacity:"0.5"
  },3000) // works!
  
  
  var allLetters = $("span");
  allLetters[1].animate({
      opacity:"0.5"
  },3000) // it doesnt works
  </code></pre>
  
  <p>Here is my fiddle: <a href="https://jsfiddle.net/n40af9dh/" rel="nofollow">https://jsfiddle.net/n40af9dh/</a></p>
  
  <p>When I invoke an animation method on the letter variable which holds an inference to the span object through jQuery traverse DOM method: $("div#text").children().first() it works. However, when I invoke the same method on:</p>
  
  <pre><code>var allLetters = $("span");
  allLetters[1].animate({
      opacity:"0.5"
  },3000) 
  </code></pre>
  
  <p>it doesnt works and console outputs the following error:</p>
  
  <blockquote>
    <p>Failed to execute 'animate' on 'Element': Partial keyframes are not
    supported.</p>
  </blockquote>