title: Can't fadeOut specific element within array
body: <p>I'm sure this is really easy and I'm just not understanding it. But I'm trying to target the first element of a jquery selector and fadeOut that element. I can fade both elements, but can't fade either one individually using the indices. I keep getting a "jQuery.Deferred exception: $(...)[0].fadeOut is not a function" error. I'm using codepen so the jquery library and SCSS are loaded into it. </p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;img src="https://static.pexels.com/photos/371633/pexels-photo-371633.jpeg" class="container__image"&gt;
    &lt;img src="https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg" class="container__image"&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
  
  }
  
  .container {
    width: 350px;
    height: 350px;
    background-color: blue;
    margin: 15px auto;
  
    &amp;__image {
      max-width: 100%;
      height: auto;
    } 
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function() {
    $(".container__image")[0].fadeOut();
  });  
  </code></pre>