OK So I'm trying to get my portfolio up and working. The problem I'm having right now is some glitchy code that I'm using for the porfolio. Right now it displays 9 thumbnails inside of a container. Then once you click on a thumbnail, they all fade out to a loading bar. Once the portfolio and picture are loaded (via json), the loading bar fades out and the portfolio stuff fades in.
The problem is that since the website's height is set to auto, when everything fades out to the loading bar, the website animates to be really small. I don't want this. I want it to stay the same height it was when it was clicked, and then once everythings loaded it animates to get bigger to show all of the information. No height change when the loading bar appears. Here's what I've been using: $(function() { var barLeft = (909 - 220) / 2, barTop = (460 - 19) / 2; $('.portfolio-piece').click(function() { $('.portfolio-piece').animate({opacity: 0}, 500).children().animate ({opacity: 0}, 500, function() { $('#main-portfolio').html('<div id="portfolio-loading"><img src="images/ajax-loader.gif" alt="Loading" /></div>'); $('#portfolio-loading').css({opacity: 0, top: barTop, left: barLeft}).animate({opacity: 1}, 500); $.getJSON('json.txt', null, function(data) { $('#portfolio-loading').animate({opacity: 0}, 500, function() { $('#main-portfolio').html('<div id="piece-image"><img src="' + data.image + '" /><table><tbody><tr><th>Name</th><td>' + data.name + '</td></tr><th>Technologies</th><td>' + data.technologies + '</td></ tr><tr><th>About</th><td>' + data.about + '</td></tr></tbody></table></ div>').css("opacity", 0).animate({opacity: 1}, 250); $('#main-portfolio').animate({height: targetHeight}, 250); }); }); }); return false; }); });