I'm relatively new to JavaScript and jQuery so go easy on me. I'm creating a website where upon jQuery document.ready
a set of basic animations are performed on different div
s on the HTML markup. All div
s have separate IDs and I am storing all div
s with same CSS property change in the same variable. Using these variables I run the function after. This code works fine but what would be a more effective manner of writing it?
<script src="jquery-1.8.3.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
function fader(){
var logofade = $('#portlogo, #toolslogo, #contactlogo, #portfoliolblw, #toolslblw, #contactlblw'),
homefade = $('#homelogo'),
homeline = $('#hline'),
uline = $('#upline'),
acrossline = $('#acrossline'),
glow = $('#logoglow');
logofade.fadeOut(0)
homefade.fadeOut(0).delay(300).fadeIn(100)
homeline.delay(100).animate({'width': '150px'}, 100)
uline.delay(200).animate({'height': '41px', 'top':'-30px'}, 100)
acrossline.delay(300).animate({'width': '825px'}, 100)
glow.fadeOut(0).delay(600).fadeIn(600);
}
fader()
});
function logochange() { $('#homelogo').delay(300).fadeIn(100);}
function logochange1() { $('#portlogo, #toolslogo, #contactlogo').fadeOut(100);}
function logochange2() { $('#portlogo').delay(300).fadeIn(100);}
function logochange3() { $('#toolslogo, #homelogo, #contactlogo').fadeOut(100);}
function logochange4() { $('#toolslogo').delay(300).fadeIn(100);}
function logochange5() { $('#portlogo, #homelogo, #contactlogo').fadeOut(100);}
function logochange6() { $('#contactlogo').delay(300).fadeIn(100);}
function logochange7() { $('#portlogo, #homelogo, #toolslogo').fadeOut(100);}
function homebtn() { $('#homelblw').fadeIn(0);}
function homebtn1() { $('#homelblw').fadeOut(0);}
function portbtn() { $('#portfoliolblw').fadeIn(0);}
function portbtn1() { $('#portfoliolblw').fadeOut(0);}
function toolsbtn() { $('#toolslblw').fadeIn(0);}
function toolsbtn1() { $('#toolslblw').fadeOut(0);}
function contactbtn() { $('#contactlblw').fadeIn(0);}
function contactbtn1() { $('#contactlblw').fadeOut(0);}
function hline1() {$('#hline').animate({'width': '150px'}, 100);}
function hline2() {$('#hline').animate({'width': '0px'}, 100);}
function pline1() {$('#pline').animate({'width': '150px'}, 100);}
function pline2() {$('#pline').animate({'width': '0px'}, 100);}
function tline1() {$('#tline').animate({'width': '150px'}, 100);}
function tline2() {$('#tline').animate({'width': '0px'}, 100);}
function cline1() {$('#cline').animate({'width': '150px'}, 100);}
function cline2() {$('#cline').animate({'width': '0px'}, 100);}
function upline1() {
$('#upline').animate({
'height': '-41px', 'top':'0px'
}, 0).delay(100).animate({
'height': '41px', 'top':'-30px'
}, 100);
}
function acrossline1() {
$('#acrossline').animate({
'width': '0px'
}, 0).delay(200).animate({
'width': '825px'
}, 100);
}
</script>
each()
? \$\endgroup\$ – fge Jun 4 '13 at 14:48