title: 2 Javascripts not working with each other... (smooth scrolling & fade body)
body: <p>Dear stackoverflowers, </p>
  
  <p>I have two javascript snippets that don't appear to be working properly together. 
  The first one is there to fade out the body on an click event in the navigation, then redirect to a different page. But this appears to be working only after I clicked a link that triggers 'JavaScript-2'. </p>
  
  <p>Here's the code for the first one:</p>
  
  <pre><code>// JavaScript-1
  &lt;script type="text/javascript"&gt;   
          $("a.transition").click(function(event){         
              event.preventDefault();                      
              linkLocation = this.href;
              $("body").fadeOut(1000, redirectPage);      
          });
  
          function redirectPage() {
              window.location = linkLocation;
          }
  &lt;/script&gt;   
  </code></pre>
  
  <p>'JavaScript-2' is the second one, that works together with 'jquery.easing.1.3.js' and produces nice smooth scrolling to an anchor. The scrolling always works fine and it fires in all situations. </p>
  
  <p>I don't know why, but it looks like, that the smooth scrolling javascript causes the other javascript to fail. </p>
  
  <p>I'm really looking forward to an answer to this little mystery.</p>
  
  <p>Here's the code for the second one: </p>
  
  <pre><code>    // JavaScript-2 
      &lt;script type="text/javascript"&gt;  
          $(function() {
              $('ul.navscroll a, #test a').bind('click',function(event){              
                  var $anchor = $(this);
  
                  $('html, body').stop().animate({
                      scrollTop: $($anchor.attr('href')).offset().top
                  }, 1500,'easeInOutExpo');
                  event.preventDefault();
              });
          });
      &lt;/script&gt;
  </code></pre>