[jQuery] How could i write simpler code?

[jQuery] How could i write simpler code?


Hi all, i'm learing jquery and i would to improve and speed up the way I
write code.
I am currently doing tests on "queue","animate" ,but i know that my approach
is wrong, i write a lot of lines of code aware that there is a method more
accurate and fast to do it.
Here a test http://www.pirolab.it/jtb/loader.html link
and the function i wrote :
jQuery(function( $ ){                
$(".a").css("opacity", 0);
$(".b").css("opacity", 0);
$(".c").css("opacity", 0);
$(".d").css("opacity", 0);
$(".e").css("opacity", 0);
$(".f").css("opacity", 0);
$(".g").css("opacity", 0);
$(".h").css("opacity", 0);
$(".i").css("opacity", 0);
$(".l").css("opacity", 0);
$(".m").css("opacity", 0);
$("#content_right").css("opacity", 0);
$("#aa").css("opacity", 0);
$("#ab").css("opacity", 0);
$("#ac").css("opacity", 0);
$("#ad").css("opacity", 0);
$("#ae").css("opacity", 0);
$("#af").css("opacity", 0);
$(window).load(function () {
window.location.replace('#primo')
$("#a1").addClass("sez")
$("#h1").css("color","#000000")
$("#content_right").fadeTo(2000, 1)
$(".loader").animate({
marginTop: "10%"
}, 500 );
$(".loader").animate({
marginTop: "-10%"
}, 500 );
$(".loader").animate({
marginTop: "10%"
}, 500 );
$(".loader").animate({
marginTop: "-10%"
}, 500 );
$(".loader").animate({
marginTop: "10%"
}, 500 );
$(".loader").animate({
marginTop: "-10%"
}, 500 );
$(".loader").animate({
marginTop: "0%"
}, 500 );
$(".loader").fadeOut(1000,0)
$(".loader").queue(function () {
$(".load").animate({
height: "0%"
}, 500 );
$(".load").queue(function () {
$(".a").fadeTo(700,1)
$(".a").queue(function () {
$(".b").fadeTo(700,1)
$(".b").queue(function () {
$(".c").fadeTo(700,1)
$(".c").queue(function () {
$(".d").fadeTo(700,1)
$(".d").queue(function () {
$(".e").fadeTo(700,1)
$(".e").queue(function () {
$(".e").dequeue();
});
$(".d").dequeue();
});
$(".c").dequeue();
});
$(".b").dequeue();
});
$(".a").dequeue();
});
$(".m").fadeTo(700,1)
$(".m").queue(function () {
$(".l").fadeTo(700,1)
$(".l").queue(function () {
$(".i").fadeTo(700,1)
$(".i").queue(function () {
$(".h").fadeTo(700,1)
$(".h").queue(function () {
$(".g").fadeTo(700,1)
$(".g").queue(function () {
$(".f").fadeTo(700,1)
$(".g").dequeue();
});
$(".h").dequeue();
});
$(".i").dequeue();
});
$(".l").dequeue();
});
$(".m").dequeue();
});
$("#aa").fadeTo(700, 1)
$("#aa").queue(function () {
$("#ab").fadeTo(700, 1)
$("#ab").queue(function () {
$("#ac").fadeTo(700, 1)
$("#ac").queue(function () {
$("#ad").fadeTo(700, 1)
$("#ad").queue(function () {
$("#ae").fadeTo(700, 1)
$("#ae").queue(function () {
$("#af").fadeTo(700, 1)
$("#ae").dequeue();
});
$("#ad").dequeue();
});
$("#ac").dequeue();
});
$("#ab").dequeue();
});
$("#primoa").dequeue();
});
$(".load").dequeue();
});
$(".loader").dequeue();
});
$("#dock").Fisheye({
maxWidth: 14,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 85,
proximity: 70,
halign : 'center'
})
});
$("#a1").click(function () {
$("#primo").css("opacity", 0)
$("#primo").fadeTo(1200, 1)
$("#b").fadeTo(1200, 0)
$("#c").fadeTo(1200, 0)
$("#d").fadeTo(1200, 0)
$("#e").fadeTo(1200, 0)
$("#f").fadeTo(1200, 0)
$("#a1").addClass("sez")
$("#h1").css("color","#000000")
$("#h2").css("color","#ff0000")
$("#h3").css("color","#ff0000")
$("#h4").css("color","#ff0000")
$("#h5").css("color","#ff0000")
$("#h6").css("color","#ff0000")
$("#a2").removeClass("sez")
$("#a3").removeClass("sez")
$("#a4").removeClass("sez")
$("#a5").removeClass("sez")
$("#a6").removeClass("sez")
});
$("#a2").click(function () {
$("#b").css("opacity", 0)
$("#b").fadeTo(1200, 1)
$("#primo").fadeTo(1200, 0)
$("#c").fadeTo(1200, 0)
$("#d").fadeTo(1200, 0)
$("#e").fadeTo(1200, 0)
$("#f").fadeTo(1200, 0)
$("#a2").addClass("sez")
$("#h1").css("color","#ff0000")
$("#h2").css("color","#000000")
$("#h3").css("color","#ff0000")
$("#h4").css("color","#ff0000")
$("#h5").css("color","#ff0000")
$("#h6").css("color","#ff0000")
$("#a1").removeClass("sez")
$("#a3").removeClass("sez")
$("#a4").removeClass("sez")
$("#a5").removeClass("sez")
$("#a6").removeClass("sez")
});
$("#a3").click(function () {
$("#c").css("opacity", 0);
$("#c").fadeTo(1200, 1)
$("#b").fadeTo(1200, 0)
$("#primo").fadeTo(1200, 0)
$("#d").fadeTo(1200, 0)
$("#e").fadeTo(1200, 0)
$("#f").fadeTo(1200, 0)
$("#a3").addClass("sez")
$("#h1").css("color","#ff0000")
$("#h2").css("color","#ff0000")
$("#h3").css("color","#000000")
$("#h4").css("color","#ff0000")
$("#h5").css("color","#ff0000")
$("#h6").css("color","#ff0000")
$("#a1").removeClass("sez")
$("#a2").removeClass("sez")
$("#a4").removeClass("sez")
$("#a5").removeClass("sez")
$("#a6").removeClass("sez")
});
$("#a4").click(function () {
$("#d").css("opacity", 0)            
$("#d").fadeTo(1200, 1)
$("#primo").fadeTo(1200, 0)
$("#c").fadeTo(1200, 0)
$("#b").fadeTo(1200, 0)
$("#e").fadeTo(1200, 0)
$("#f").fadeTo(1200, 0)
$("#a4").addClass("sez")
$("#h1").css("color","#ff0000")
$("#h2").css("color","#ff0000")
$("#h3").css("color","#ff0000")
$("#h4").css("color","#000000")
$("#h5").css("color","#ff0000")
$("#h6").css("color","#ff0000")
$("#a1").removeClass("sez")
$("#a3").removeClass("sez")
$("#a2").removeClass("sez")
$("#a5").removeClass("sez")
$("#a6").removeClass("sez")
});
$("#a5").click(function () {
$("#e").css("opacity", 0)                
$("#e").fadeTo(1200, 1)
$("#primo").fadeTo(1200, 0)
$("#c").fadeTo(1200, 0)
$("#b").fadeTo(1200, 0)
$("#d").fadeTo(1200, 0)
$("#f").fadeTo(1200, 0)
$("#a5").addClass("sez");
$("#h1").css("color","#ff0000")
$("#h2").css("color","#ff0000")
$("#h3").css("color","#ff0000")
$("#h4").css("color","#ff0000")
$("#h5").css("color","#000000")
$("#h6").css("color","#ff0000")
$("#a1").removeClass("sez")
$("#a3").removeClass("sez")
$("#a4").removeClass("sez")
$("#a2").removeClass("sez")
$("#a6").removeClass("sez")
});
$("#a6").click(function () {
$("#f").css("opacity", 0)                    
$("#f").fadeTo(1200, 1)
$("#primo").fadeTo(1200, 0)
$("#c").fadeTo(1200, 0)
$("#b").fadeTo(1200, 0)
$("#e").fadeTo(1200, 0)
$("#d").fadeTo(1200, 0)
$("#a6").addClass("sez");
$("#h1").css("color","#ff0000")
$("#h2").css("color","#ff0000")
$("#h3").css("color","#ff0000")
$("#h4").css("color","#ff0000")
$("#h5").css("color","#ff0000")
$("#h6").css("color","#000000")
$("#a1").removeClass("sez")
$("#a3").removeClass("sez")
$("#a4").removeClass("sez")
$("#a5").removeClass("sez")
$("#a2").removeClass("sez")
});
$("content_box img").fadeTo(300, 1.0);
$(".content_box img").hover(function(){
$(this).fadeTo(300, 0.5);
},function(){
$(this).fadeTo(300, 1.0);
});
});
    
Someone can give me good advice to improve?
Tnx in advance
Piro
--
View this message in context: http://www.nabble.com/How-could-i-write-simpler-code--tp18710390s27240p18710390.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.