taquigrafía para .load () enlaces ajax con cargador

Aquí está la estructura del código: http://jsfiddle.net/ss1ef7sq/ aunque en realidad no funciona en js fiddle, pero el código en sí funciona, ya que lo he probado localmente a través de Firefox.

aquí es donde he basado esto: http://html.net/tutorials/javascript/lesson21.php

jquery / ajax:

$('#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);}); 

entonces mi pregunta es, ¿hay alguna manera de hacer que sea como un código más corto donde solo puede obtener el valor de esos # 10ns o asumiendo que habrá una página diferente con su propio nido de identificadores únicos sin escribirlos individualmente? todavía hay muchas cosas que no entiendo con ajax, así que agradecería que alguien pueda ayudarme y me explique al menos lo esencial.

He buscado en línea pero estoy realmente atascado. También descubrí al menos que es posible agregar transiciones, pero la forma en que está codificado allí es que solo tendrá la transición para la página entrante y no la que será reemplazada. También tengo un problema con los cargadores de página, pero lo guardaré cuando esté atrapado allí también.

gracias por adelantado. =)

    Usa clases en lugar de id ‘s. Establezca el atributo href que desea cargar al hacer clic y acceda a través de $(this).attr('href') .

     link 1 link 2 ... 

    Guión:

     $('.load-me').click(function(e){ e.preventDefault(); $('.main-container').hide().load($(this).attr('href'), function() { // ... $(this).fadeIn(800); }) }); 

    JSFiddle


    Si necesita que la load espere la animación de ocultación del contenedor, puede hacerlo de otra manera.

     $('.load-me').click(function(e){ e.preventDefault(); // get the url from clicked anchor tag var url = $(this).attr('href'); // fade out the container and wait for animation complete $('.main-container').fadeOut(200, /* animation complete callback: */ function(){ // container is hidden, load content: $(this).load(url, /* load complete callback: */ function() { // content is loaded, show container up $(this).slideDown(200); }); }); }); 

    JSFiddle