Making my Jquery scripts more efficient.

[Historical Forums User]

I’ve been using jQuery for a while now, but still feel like a beginner. I can accomplish things I hadn’t been able to before, but I feel like I do it a dumbed-down, less efficient, way. I’ve written this bit of code which handles animations of slides based on which radio button is checked, and it feels awfully redundant (not to mention its not very scalable). How could I make this code more efficient?

$("#newproject").hide();



$(".jqTransformRadio").click(function() {



var fadeDuration = 1500; //time in milliseconds



var contacttypebg = "label .contacttypebg";



var contacttype0 = "#contacttype_intro ";

var contacttype1 = "#contacttype_newproject  ";

var contacttype2 = "#contacttype_ft ";



var eq0id = contacttype0 + contacttypebg;

var eq1id = contacttype1 + contacttypebg;

var eq2id = contacttype2 + contacttypebg;



var spantxt= "span.contactypetext span";

var eq0em = contacttype0 + spantxt;

var eq1em = contacttype1 + spantxt;

var eq2em = contacttype2 + spantxt;



var animout = "{opacity:0},fadeDuration";

var animin = "{opacity:1},fadeDuration";



var formpopwidth = $(".formpopup").width();



//if no radio button checked, close formpopupwrap

if ($("#contactTypeAreas .jqTransformRadio").slice(4).attr("class") == "jqTransformRadio jqTransformChecked"){

$(".formspacer").animate({height:"35px"},{duration: fadeDuration,easing: 'easeInOutCubic'});

}

else {

$(".formspacer").animate({height:"260px"},{duration: fadeDuration,easing: 'easeInOutCubic'});

}



//"...introduce myself"

if ($("#contactTypeAreas .jqTransformRadio").eq(0).attr("class") == "jqTransformRadio jqTransformChecked") {

$(".social")

.animate({left:"0",opacity:"1"},{duration: fadeDuration, easing: 'easeInOutCubic'});

$(eq0id).animate({opacity:0},fadeDuration);

$(eq0em).animate({opacity:1},fadeDuration);

} else {

$(".social")

.animate({left:"100%",opacity:"0"},{duration: fadeDuration, easing: 'easeInOutCubic'})

.animate({left:-formpopwidth},1);

$(eq0id).animate({opacity:1},fadeDuration);

$(eq0em).animate({opacity:0},fadeDuration);

}



//"...brand new project"

if ($("#contactTypeAreas .jqTransformRadio").eq(1).attr("class") == "jqTransformRadio jqTransformChecked") {

$("#newproject").slideDown();

$("#text").slideUp();

$(".newproject")

.animate({left:"0",opacity:"1"},{duration: fadeDuration, easing: 'easeInOutCubic'});

$(eq1id).animate({opacity:0},fadeDuration);

$(eq1em).animate({opacity:1},fadeDuration);

} else {

$("#newproject").slideUp();

$("#text").slideDown();

$(".newproject")

.animate({left:"100%",opacity:"0"},{duration: fadeDuration, easing: 'easeInOutCubic'})

.animate({left:-formpopwidth},1);

$(eq1id).animate({opacity:1},fadeDuration);

$(eq1em).animate({opacity:0},fadeDuration);

}



//"...discuss the full time position"

if ($("#contactTypeAreas .jqTransformRadio").eq(2).attr("class") == "jqTransformRadio jqTransformChecked") {

$(".resume")

.animate({left:"0",opacity:"1"},{duration: fadeDuration, easing: 'easeInOutCubic'});

$(eq2id).animate({opacity:0},fadeDuration);

$(eq2em).animate({opacity:1},fadeDuration);

} else {

$(".resume")

.animate({left:"100%",opacity:"0"},{duration: fadeDuration, easing: 'easeInOutCubic'})

.animate({left:-formpopwidth},1);

$(eq2id).animate({opacity:1},fadeDuration);

$(eq2em).animate({opacity:0},fadeDuration);

}



});

[Author]

Posts