title: jQuery animation only on page loading
body: <p>I have a site where I animate the background when I load the page. Each of my page has this structure:</p>
  
  <pre><code>&lt;?php require 'Top.php'; ?&gt;
  &lt;!--Page content--&gt;
  &lt;?php require 'Bottom.php'; ?&gt;
  </code></pre>
  
  <p>The Top.php looks like this:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  
  &lt;link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;script src="js/animate.js"&gt;&lt;/script&gt;
  
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="css/styles.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="content"&gt;
      &lt;div id="net"&gt;
          &lt;div id="net-image"&gt;&lt;/div&gt;
          &lt;div id="lines"&gt;&lt;/div&gt;
          &lt;div id="logo"&gt;&lt;h1&gt;AVBELJ&lt;/h1&gt;&lt;h2&gt;PEČARSTVO&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="square" id="st1"&gt;&lt;/div&gt;
          &lt;div class="square" id="st2"&gt;&lt;/div&gt;
          &lt;div class="square" id="st3"&gt;&lt;/div&gt;
          &lt;div class="square" id="st4"&gt;&lt;/div&gt;
          &lt;div class="square" id="st5"&gt;&lt;/div&gt;
          &lt;div class="square" id="st6"&gt;&lt;/div&gt;
          &lt;div class="square" id="st7"&gt;&lt;/div&gt;
          &lt;div class="square" id="st8"&gt;&lt;/div&gt;
          &lt;div class="square" id="st9"&gt;&lt;/div&gt;
          &lt;div class="square" id="st10"&gt;&lt;/div&gt;
          &lt;div class="square" id="st11"&gt;&lt;/div&gt;
          &lt;div class="square" id="st12"&gt;&lt;/div&gt;
          &lt;div class="square" id="st13"&gt;&lt;/div&gt;
  
  
          &lt;!--&lt;img draggable="true" id="snowman" src="images/temenKvadrat.png" alt="snowman" style="position: absolute; left: 50px; top: 120px; z-index: 200;"&gt;--&gt;
  
  
          &lt;nav id="menu"&gt;
              &lt;ul id="mainlevel"&gt;
                  &lt;li&gt;&lt;a href="about.php"&gt;&lt;img src="images/about.png" border="0" alt="O NAS"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="items.php"&gt;&lt;img src="images/items.png" border="0" alt="IZDELKI"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="gallery.php"&gt;&lt;img src="images/gallery.png" border="0" alt="GALERIJA"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="references.php"&gt;&lt;img src="images/references.png" border="0" alt="REFERENCE"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.php"&gt;&lt;img src="images/contact.png" border="0" alt="KONTAKT"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>and animate.js starts with window.load:</p>
  
  <pre><code>$(window).load(function() {
      $("#lines").slideDown(2500);
      $('#net-image').delay(2000).fadeIn(1000);
      $("#logo").delay(3000).animate({left: "0px"}, 2000);
      $(".square").delay(3000).show("scale",{}, 1000);
  })
  </code></pre>
  
  <p>My question is, how can I make the animation happen only when I first load the page. Now it animates every time a new menu item is clicked. How can I change it so when a menu item is clicked, the animation doesn't happen.</p>
  
  <p>Thank you very much for your help!</p>