Vamos a ir una a una, viendo las partes que quieres simplificar:
1. Intime
Empiezo con este porque es más "sencillo" y es más grande. Éste es tu código:
$(function() {
$(".intime2").delay(2000).fadeIn(0);
$(".intime4").delay(4000).fadeIn(0);
$(".intime5").delay(5000).fadeIn(0);
$(".intime4").delay(4000).fadeIn(0);
$(".intime5").delay(5000).fadeIn(0);
$(".intime6").delay(6000).fadeIn(0);
$(".intime8").delay(8000).fadeIn(0);
$(".intime10").delay(10000).fadeIn(0);
$(".intime12").delay(12000).fadeIn(0);
$(".intime14").delay(14000).fadeIn(0);
$(".intime15").delay(15000).fadeIn(0);
$(".intime17").delay(17000).fadeIn(0);
$(".intime20").delay(20000).fadeIn(0);
$(".intime25").delay(25000).fadeIn(0);
$(".intime27").delay(27000).fadeIn(0);
$(".intime30").delay(30000).fadeIn(0);
$(".intime35").delay(35000).fadeIn(0);
$(".intime40").delay(40000).fadeIn(0);
$(".intime45").delay(45000).fadeIn(0);
$(".intime50").delay(50000).fadeIn(0);
$(".intime55").delay(55000).fadeIn(0);
$(".intime60").delay(60000).fadeIn(0);
$(".intime70").delay(70000).fadeIn(0);
$(".intime80").delay(80000).fadeIn(0);
$(".intime90").delay(90000).fadeIn(0);
$(".intime100").delay(100000).fadeIn(0);
$(".intime110").delay(110000).fadeIn(0);
$(".intime120").delay(120000).fadeIn(0);
$(".intime140").delay(140000).fadeIn(0);
$(".intime160").delay(160000).fadeIn(0);
$(".intime180").delay(180000).fadeIn(0);
$(".intime210").delay(210000).fadeIn(0);
$(".intime240").delay(240000).fadeIn(0);
$(".intime300").delay(300000).fadeIn(0);
});
Todas las clases son .intimeX
donde X es un número y el delay
es de 1000 veces ese número, entonces esto se podría simplificar así:
$(function() {
// para todos los elementos que contengan intime en su clase
$("[class*=intime]").each(function() {
// usar expresiones regulares para obtener el número detras de intime
var retraso = parseInt($(this).attr("class").match(/intime\d+/g)[0].replace("intime",""));
// mostrar el elemento con el retraso adecuado
$(this).delay(retraso * 1000).fadeIn(0);
});
});
2. Outtime
Los outtimes funcionarán de manera similar a los intimes, sólo que en lugar de buscar por intime, buscaremos outtime, y en lugar de hacer un fadeIn se hará un fadeOut.
Éste es tu código:
setInterval(function() {
$('.outtime30').fadeOut(0);
}, 30000);
setInterval(function() {
$('.outtime34').fadeOut(0);
}, 34000);
setInterval(function() {
$('.outtime40').fadeOut(0);
}, 40000);
Mismo procedimiento: todos tienen la clase outtimeX donde X es un número y el fadeOut se realiza X segundos después (el número * 1000). Aplicamos el mismo procedimiento:
$(function() {
// para todos los elementos que contengan outtime en su clase
$("[class*=outtime]").each(function() {
// usar expresiones regulares para obtener el número detras de outtime
var retraso = parseInt($(this).attr("class").match(/outtime\d+/g)[0].replace("outtime",""));
// esconder el elemento usando el intervalo indicado
setInterval("$('.outtime" + retraso + "').fadeOut(0)", retraso * 1000);
});
});
3. pre
Esta parte es más complicada, aunque tampoco mucho. Voy a poner aquí el código que tienes, pero lo voy a formatear de manera diferente (aparte de corregir un par de cosillas):
jQuery(function () {
var $els = $('pre[id^=pictureY5]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(0, function () {
i = (i + 1) % len
$els.eq(i).fadeIn(0);
})
}, 300)
});
jQuery(function () {
var $els = $('pre[id^=pictureX2]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(0, function () {
i = (i + 1) % len
$els.eq(i).fadeIn(0)
}, 200);
});
});
El código es similar en ambos casos, lo único que cambia de uno a otro son: los selectores (en uno es pictureY5 y en el otro es pictureX2) y los tiempos (300 y 200 respectivamente). Podrías intentar seleccionar ambos con jQuery (se puede hacer separando los selectores con coma), pero eso crearía problemas a la hora de mostrar/esconder los elementos (porque habría una única lista en lugar de dos listas).
Lo que haría para solucionar eso crear una función independiente a la que le pases como parámetros los dos valores que cambian. Entonces cuando se carga la página, hacer dos llamadas a la función, una para pictureY5 con 300 y otra para pictureX2 con 200.
Así podrías hacer algo como esto:
function mostrarEsconder(selector, tiempo) {
var $els = $('pre[id^=' + selector + ']'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(0, function () {
i = (i + 1) % len;
$els.eq(i).fadeIn(0);
})
}, tiempo)
}
jQuery(function() {
mostrarEsconder('pictureY5', 300);
mostrarEsconder('pictureX2', 200);
});
Juntándolo todo, el código se vería reducido a algo así:
function mostrarEsconder(selector, tiempo) {
var $els = $('pre[id^=' + selector + ']'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(0, function () {
i = (i + 1) % len;
$els.eq(i).fadeIn(0);
})
}, tiempo)
}
$(function() {
$("[class*=intime]").each(function() {
var retraso = parseInt($(this).attr("class").match(/intime\d+/g)[0].replace("intime",""));
$(this).delay(retraso * 1000).fadeIn(0);
});
$("[class*=outtime]").each(function() {
var retraso = parseInt($(this).attr("class").match(/outtime\d+/g)[0].replace("outtime",""));
setInterval("$('.outtime" + retraso + "').fadeOut(0)", retraso * 1000);
});
mostrarEsconder('pictureY5', 300);
mostrarEsconder('pictureX2', 200);
});