I made a script that animates the papers in to make it look like they are falling onto a desk. Also my javascript controls the slide out page for the navigation. The site works fine in all other browsers except Internet Explorer. In IE neither the papers nor the slide out page show up.
My site is:
http://www.preservingfamilystories.com
Here is my javascript used
$(document).ready(function() {
$.loadImages(['images/paper.png', 'images/paper2.png', 'images/paper3.png', 'images/paper4.png', 'images/paper6.png', 'images/paper7.png'], function() {
$("#paper1").animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1,
position: "relative",
zIndex: 4
}, { queue: true, duration: 300});
$("#paper2").delay(200).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper3").delay(400).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper4").delay(600).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper5").delay(800).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper6").delay(1000).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper7").delay(1200).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#paper8").delay(1800).animate({
width: '719px',
height: '794px',
top: 0,
left: 0,
opacity: 1
}, { queue: true, duration: 300});
$("#contentarea").delay(2000).animate({ opacity: 1}, 500);
$("#footer").delay(2000).animate({ opacity: 1}, 500);
$("#quote").delay(2000).animate({ opacity: 1}, 500);
$("#nav").delay(2000).animate({ opacity: 1, left: '240px'}, 500);
$("#menu").delay(2500).animate({ opacity: 1}, 500);
});
$("#menu").live('click', function() {
if ($("#nav").css("left") != "400px") {
$(this).animate({ left: '+=160px'}, 500);
$("#nav").animate({ left: '400px'}, 500, function() {
$("#nav-items").fadeIn(500);
});
}
else {
$("#nav-items").fadeOut(500, function() {
$("#menu").animate({ left: '665px'}, 500);
$("#nav").animate({ left: '240px'}, 500);
});
}
});
});
If anyone could help me I would greatly appreciate it. Thanks