title: Animating image swap during header resize
body: <p>Hello people that are infinitely smarter than I.</p>
  
  <p>I've been able to do the image swaps during a header resize a few different ways, using jQuery and CSS.  I'm currently using the following code to resize my header:</p>
  
  <pre><code>jQuery(document).on('scroll',function(){
      if(jQuery(document).scrollTop()&gt;50){ 
          jQuery('header').removeClass('site-header').addClass('sticky');
      }
      else{
          jQuery('header').removeClass('sticky').addClass('site-header');
  
      }
  });
  </code></pre>
  
  <p>That works perfectly fine, and I've been able to sort everything else out (menu, etc)</p>
  
  <p>Where I'm running into trouble, is making the transition between image swaps look "pretty".</p>
  
  <p>I've tried using the example here: <a href="https://stackoverflow.com/questions/19406435/js-jquery-swap-image-on-scroll-event">JS/jQuery swap image on scroll event</a> and that works awesome, except that the image swap happens instantly and I have tried for hours and hours to make them fade, or slide to the left and top, or using CSS classes to change the opacity and display:hidden/block with transitions (but it flickers using css), or otherwise animate in <em>some</em> way.  </p>
  
  <p>But, alas, I have failed and I find that I have no other option at this point other than to ask for help.</p>
  
  <p>What I'd really like to do, is emulate this: <a href="http://www.joomlashine.com/joomla-templates.html" rel="nofollow noreferrer">http://www.joomlashine.com/joomla-templates.html</a></p>
  
  <p>The animation is smooth and clean and how to accomplish something like it is eluding me.</p>
  
  <p>I need more reputation to post the urls to the images I'm using, but if it helps I can email them, or get them to you guys in some other way.</p>
  
  <p>This is already absurdly long, but if anyone feels the need to further embarrass me, I can post all of the failed attempts I've made trying to do this ;)</p>
  
  <p>Thank you all in advance!</p>
  
  <p>Tyler.</p>