Menu
Hi everyone,
I am a bit of a newb at javascript but here it goes. I have written a bit of javascript that is doing everything I want it to but just at the wrong times. I am wondering if anyone can help me with the timing of the code below. I have written in the comments when I would like the sections to start their execution. Any help/guidance is greatly appreciated!
[CODE]
$(document).ready(function() {
$(“#JSlc”).click(function() {
var l = ($(window).width() – $(‘#JSarea’).width()*1.8) *.5;
var t = ($(window).height() – $(‘#JSarea’).height()*1.8) *.5;
var cfsc = parseInt($(“.scp”).css(“font-size”));
var nfsc = cfsc + 8 + “px”;
var cflc = parseInt($(“.lcp”).css(“font-size”));
var nflc = cflc + 12 + “px”;
$(this).parent().siblings().animate({“opacity”:”0″},300);
// section to run immediately once above section is completely “invisible”
$(‘#JSarea’).animate({‘height’: $(‘#JSarea’).height()*1.8, ‘width’: $(‘#JSarea’).width()*1.8, ‘top’: t + ‘px’, ‘left’: l + ‘px’},400);
$(‘#JSlc’).animate({‘height’: $(‘#JSlc’).height()*1.8, ‘width’: $(‘#JSlc’).width()*1.8},400);
$(‘.scp’).animate({‘font-size’: nfsc},400);
$(‘.lcp’).animate({‘font-size’: nflc},400);
$(‘.back’).animate({‘height’: $(‘.back’).height()*1.8, ‘width’: $(‘.back’).width()*1.8},400);
$(‘.smallcircleleft’).animate({‘height’: $(‘.smallcircleleft’).height()*1.8, ‘width’: $(‘.smallcircleleft’).width()*1.8},400);
$(‘.smallcircleupleft’).animate({‘height’: $(‘.smallcircleupleft’).height()*1.8, ‘width’: $(‘.smallcircleupleft’).width()*1.8},400);
$(‘.smallcircleup’).animate({‘height’: $(‘.smallcircleup’).height()*1.8, ‘width’: $(‘.smallcircleup’).width()*1.8},400);
$(‘.smallcircleupright’).animate({‘height’: $(‘.smallcircleupright’).height()*1.8, ‘width’: $(‘.smallcircleupright’).width()*1.8},400);
$(‘.smallcircleright’).animate({‘height’: $(‘.smallcircleright’).height()*1.8, ‘width’: $(‘.smallcircleright’).width()*1.8},400);
$(‘.smallcirclerightdown’).animate({‘height’: $(‘.smallcirclerightdown’).height()*1.8, ‘width’: $(‘.smallcirclerightdown’).width()*1.8},400);
$(‘.smallcircledown’).animate({‘height’: $(‘.smallcircledown’).height()*1.8, ‘width’: $(‘.smallcircledown’).width()*1.8},400);
// section to start immediately when Line 4 in the last section is complete
$(“#JSback”).delay(300).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleleft”).delay(400).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleupleft”).delay(500).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleup”).delay(600).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleupright”).delay(700).animate({“opacity”:”1″},1000);
$(“#JSsmallcircleright”).delay(800).animate({“opacity”:”1″},1000);
$(“#JSsmallcirclerightdown”).delay(900).animate({“opacity”:”1″},1000);
$(“#JSsmallcircledown”).delay(1000).animate({“opacity”:”1″},1000);
});
});
$(document).ready(function() {
$(“#JSback”).click(function() {
var l = ($(window).width() – $(‘#JSarea’).width()/1.8) *.5;
var t = ($(window).height() – $(‘#JSarea’).height()/1.8) *.5;
var cfsc = parseInt($(“.scp”).css(“font-size”));
var nfsc = cfsc – 8 + “px”;
var cflc = parseInt($(“.lcp”).css(“font-size”));
var nflc = cflc – 12 + “px”;
// section starts immediately but elements progressively fade out
$(“#JSsmallcircledown”).delay(300).animate({“opacity”:”0″},1000);
$(“#JSsmallcirclerightdown”).delay(400).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleright”).delay(500).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleupright”).delay(600).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleup”).delay(700).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleupleft”).delay(800).animate({“opacity”:”0″},1000);
$(“#JSsmallcircleleft”).delay(900).animate({“opacity”:”0″},1000);
$(“#JSback”).delay(1000).animate({“opacity”:”0″},1000);
// section to start once all elements in last section are completely “invisible”
$(‘.smallcircledown’).delay(1500).animate({‘height’: $(‘.smallcircledown’).height()/1.8, ‘width’: $(‘.smallcircledown’).width()/1.8},400);
$(‘.smallcirclerightdown’).delay(1500).animate({‘height’: $(‘.smallcirclerightdown’).height()/1.8, ‘width’: $(‘.smallcirclerightdown’).width()/1.8},400);
$(‘.smallcircleright’).delay(1500).animate({‘height’: $(‘.smallcircleright’).height()/1.8, ‘width’: $(‘.smallcircleright’).width()/1.8},400);
$(‘.smallcircleupright’).delay(1500).animate({‘height’: $(‘.smallcircleupright’).height()/1.8, ‘width’: $(‘.smallcircleupright’).width()/1.8},400);
$(‘.smallcircleup’).delay(1500).animate({‘height’: $(‘.smallcircleup’).height()/1.8, ‘width’: $(‘.smallcircleup’).width()/1.8},400);
$(‘.smallcircleupleft’).delay(1500).animate({‘height’: $(‘.smallcircleupleft’).height()/1.8, ‘width’: $(‘.smallcircleupleft’).width()/1.8},400);
$(‘.smallcircleleft’).delay(1500).animate({‘height’: $(‘.smallcircleleft’).height()/1.8, ‘width’: $(‘.smallcircleleft’).width()/1.8},400);
$(‘.back’).delay(1500).animate({‘height’: $(‘.back’).height()/1.8, ‘width’: $(‘.back’).width()/1.8},400);
$(‘#JSlc’).delay(1700).animate({‘height’: $(‘#JSlc’).height()/1.8, ‘width’: $(‘#JSlc’).width()/1.8},400);
$(‘.scp’).delay(1700).animate({‘font-size’: nfsc},400);
$(‘.lcp’).delay(1700).animate({‘font-size’: nflc},400);
$(‘#JSarea’).delay(1700).animate({‘height’: $(‘#JSarea’).height()/1.8, ‘width’: $(‘#JSarea’).width()/1.8, ‘top’: t + ‘px’, ‘left’: l + ‘px’},400);
// section should start as soon as above section has completed
$(this).parent().siblings().delay(1800).animate({“opacity”:”1″},500);
});
});