title: shorthand for .load() ajax links with loader
body: <p>here's the structure of the code: <a href="http://jsfiddle.net/ss1ef7sq/" rel="nofollow">http://jsfiddle.net/ss1ef7sq/</a>
  although it's not really working at js fiddle but the code itself is working as i've tested it locally through firefox.</p>
  
  <p>this is where i've based this on: <a href="http://html.net/tutorials/javascript/lesson21.php" rel="nofollow">http://html.net/tutorials/javascript/lesson21.php</a></p>
  
  <p>jquery/ajax:</p>
  
  <pre><code>$('#ep-101').click(function(){$('.main-container').load('link.html #ep101').hide().fadeIn(800);});
  $('#ep-102').click(function(){$('.main-container').load('link.html #ep102').hide().fadeIn(800);});
  $('#ep-103').click(function(){$('.main-container').load('link.html #ep103').hide().fadeIn(800);});
  $('#ep-104').click(function(){$('.main-container').load('link.html #ep104').hide().fadeIn(800);});
  $('#ep-105').click(function(){$('.main-container').load('link.html #ep105').hide().fadeIn(800);});
  </code></pre>
  
  <p>so my question is, is there a way to make it like a shorter code where it can just get the value of those #10ns or assuming that there will be a different page with it's own nest of unique ids without typing them individually? there's still a lot i don't understand with ajax so i'd appreciate it if anyone can help &amp; explain at least the gist of it as well.</p>
  
  <p>i've looked around online but i'm really stuck. i also at least found out that it's possible to add transitions but the way it's coded there is that it will only have the transition for the incoming page &amp; not the one that will be replaced. i also have a prob with page loaders effects but i'll save it for when i'm stuck there as well.</p>
  
  <p>thanks in advance. =)</p>