[jQuery] Effects optimisation
Hi everyone
I'm trying to "fight the good fight" in my company to develop a
website using jQuery rather than Flash. We only want a site with basic
animations like fades and moving photos around, rather than full-on
vector animation, which I confidently assured our Marketing and
Designer people would be possible using jQuery!
I've created a very basic prototype containing the type of effects
we're going to need, and people are impressed but they are a little
concerned with the performance of the animations. Being a bit of a
jQuery n00b, I was wondering if anyone would be prepared to review
what I've done so far and spot if there are any optimisation tips that
I could benefit from. It's up at http://sandbox.suite-e.co.uk/, and
doesn't have certain key things I would build into the final site
(e.g. image preloading for that first image).
The basic script I've created is accessible using Firebug, but I'll
post it here as well:
var images = ['tez.jpg', 'popsicle.jpg', 'elvis.jpg',
'crystalball.jpg'];
var intervalRef;
$("#menu a").click(function() {
clearInterval(intervalRef);
});
$("#image img").fadeIn(1500, function() {
$("#image").animate({
marginLeft: "150px"
}, 3000);
$("#menu")
.animate({
opacity: "0.8"
}, 500)
.animate({
width: "275px",
left: "150px"
}, 4000);
$("#image img").animate({
height: "668px",
width: "910px",
marginLeft: "-100px",
marginTop: "0px"
}, 4500, function() {
$("#logo").fadeIn(2000);
$("#menu *").each(function() {
$(this).fadeIn({duration: 300, queue: "global", postDelay: 350});
});
$("#image img").animate({
marginLeft: "0px"
}, 6000, function() {
changeImage();
intervalRef = setInterval(changeImage, 14500);
});
});
});
});
function changeImage() {
var exp = /[^\/]*\.\w{3}$/gi;
var currentImg = $("#image img").attr("src").match(exp)[0];
var newImg;
if(currentImg != null) {
var idx = images.indexOf(currentImg);
if(idx != -1) {
if (idx != -1 && ++idx == images.length) {
idx = 0;
}
newImg = $("#image img").attr("src").replace(exp, images[idx]);
$("#image #fade *").remove();
$("#image #fade").append('<img src="' + newImg + '" alt="" /