title: Streamlining in JQuery
body: <p>I was just wondering if there is anyway to streamline my JQuery code at all? This is what I have at the moment:</p>
  
  <pre><code>$(document).ready(function () {
      $(window).bind("unload", function () {});
  
      $("#bg a").click(function (event) {
          event.preventDefault();
      });
  
      $("a.transition2").hover(function (event) {
          event.preventDefault();
          $(".background2").stop(true, false).animate({
              opacity: "1"
          }, 1000);
      },
  
      function () {
          $(".background2").stop(true, false).delay(500).animate({
              opacity: "0"
          }, 1500);
      });
      $("a.transition3").hover(function (event) {
          event.preventDefault();
          $(".background3").stop(true, false).animate({
              opacity: "1"
          }, 1000);
      },
  
      function () {
          $(".background3").stop(true, false).delay(500).animate({
              opacity: "0"
          }, 1500);
      });
      $("a.transition4").hover(function (event) {
          event.preventDefault();
          $(".background4").stop(true, false).animate({
              opacity: "1"
          }, 1000);
      },
  
      function () {
          $(".background4").stop(true, false).delay(500).animate({
              opacity: "0"
          }, 1500);
      });
      $("a.transition5").hover(function (event) {
          event.preventDefault();
          $(".background5").stop(true, false).animate({
              opacity: "1"
          }, 1000);
      },
  
      function () {
          $(".background5").stop(true, false).delay(500).animate({
              opacity: "0"
          }, 1500);
      });
      $("a.transition6").hover(function (event) {
          event.preventDefault();
          $(".background6").stop(true, false).animate({
              opacity: "1"
          }, 1500);
      },
  
      function () {
          $(".background6").stop(true, false).delay(500).animate({
              opacity: "0"
          }, 1000);
      });
      $("a.transition7").hover(function (event) {
          event.preventDefault();
          $(".background7").stop(true, false).animate({
              opacity: "1"
          }, 1000);
      },
  
      function () {
          $(".background7").stop(true, false).delay(500).animate({
              opacity: "0"
          }, 1500);
      });
      $("a.transition8").hover(function (event) {
          event.preventDefault();
          $(".background8").stop(true, false).animate({
              opacity: "1"
          }, 1000);
      },
  
      function () {
          $(".background8").stop(true, false).delay(500).animate({
              opacity: "0"
          }, 1500);
      });
  
      $("a.transition2").click(function (event) {
          event.preventDefault();
          $("#border").animate({
              right: "-50px"
          }, 500);
          $("#border").animate({
              left: "300px"
          }, 500);
          $("#border").animate({
              width: "30px"
          }, 500);
          $("#social").animate({
              right: "-50px"
          }, 500);
          $("#social").animate({
              left: "20px"
          }, 500);
          $("#menu").animate({
              right: "-200px"
          }, 500);
          $("#menu").animate({
              left: "50px"
          }, 500);
      });
  
  
      $("a.transition8").click(function (event) {
          event.preventDefault();
          $("#contact").animate({
              opacity: "1"
          });
      });
      $("#contact").click(function (event) {
          event.preventDefault();
          $("#contact").animate({
              opacity: "0"
          });
      });
  
  });
  </code></pre>
  
  <p>It's the transition hovers that would be really nice to put into one bit of code?</p>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;div id="bg"&gt;
  &lt;img src="photos/backgrounds/home.jpg" class="background1" alt=""/&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="photos/backgrounds/about.jpg" class="background2" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="photos/backgrounds/3D.jpg" class="background3" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="photos/backgrounds/photo.jpg" class="background4" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="photos/backgrounds/video.jpg" class="background5" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="photos/backgrounds/graphics.jpg" class="background6" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="photos/backgrounds/web.jpg" class="background7" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;&lt;img src="photos/backgrounds/contact.jpg" class="background8" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="" class="transition2"&gt;aboutme&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="" class="transition3"&gt;3Dmodelling&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="" class="transition4"&gt;photography&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="" class="transition5"&gt;videocreation&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="" class="transition6"&gt;graphics&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="" class="transition7"&gt;webdesign&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="" class="transition8"&gt;contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Hopefully someone might be able to help? Thanks guys.</p>