title: Animating when filtering divs
body: <p>I can't quite wrap my head around how to do this, so any help would be appreciated.</p>
  
  <p>I have a search field and as you type into it, it is looking at a data-attribute and hiding the divs that don't have the correct data. I would like to fade out the divs that don't have the correct data. I'd also like them to fade in as you clear out the search box. I can't quite figure out what I need to do, should I use .fadeIn/.fadeOut or should I be adding/removing classes?</p>
  
  <p>This is my code for the filtering:</p>
  
  <pre><code>$("#filter").keyup(function(){
      var selectSize = $(this).val();
      filter(selectSize);
  });
  
  function filter(e) {
      if(e) {
          var regex = new RegExp('\\b\\w*' + e + '\\w*\\b', 'i');
          $('.oneStaff').hide().filter(function () {
              return regex.test($(this).data('regions'))
          }).show();
      } else {
          $('.oneStaff').show();
        }
  }
  </code></pre>