Weird problem with variables
Hey guys, I'm pretty new to jQuery, and I'm trying to figure out why this isn't working. I'm gonna attach the code below, but it's pretty long, so I'll detail the problem here.
I'm trying to pass the variables declared in the document.ready function to the other click functions below, but for some reason, it won't animate the divs. It's getting the height correctly (I checked with the
$('#homeBottom').text("The height is " + homeContentHeight + "px."); line. If you want to see it in action (or inaction), it's at
www.isthatclear.com/svcm
(and click on the Services link). Thanks!
Here's the code I'm working with:
-
$(document).ready(function() {
$('#home').show();
var homeContentHeight = $('#home').height();
var servContentHeight = $('#services').height();
var guarContentHeight = $('#ourGuarantee').height();
var contContentHeight = $('#contact').height();
var cleaContentHeight = $('#cleaningTips').height();
var abouContentHeight = $('#aboutUs').height();
$('#cleaningTips').hide();
$('#contact').hide();
$('#ourGuarantee').hide();
$('#services').hide();
$('#aboutUs').hide();
$('#contBottom').text("The height is " + contContentHeight + "px.");
if (jQuery.browser.msie)
$('#content').animate({ height: homeContentHeight + 50 }, 500)
else
$('#content').animate({ height: homeContentHeight }, 500)
});
$(function(){
$('#menuHome').click(function(){
$('#home').fadeIn()
$('#services').fadeOut()
$('#ourGuarantee').fadeOut()
$('#contact').fadeOut()
$('#cleaningTips').fadeOut()
$('#aboutUs').fadeOut()
if (jQuery.browser.msie)
$('#content').animate({ height: homeContentHeight + 50 }, 500)
else
$('#content').animate({ height: homeContentHeight }, 500)
});
});
$(function(){
$('#menuServices').click(function(){
$('#home').fadeOut()
$('#services').fadeIn()
$('#ourGuarantee').fadeOut()
$('#contact').fadeOut()
$('#cleaningTips').fadeOut()
$('#aboutUs').fadeOut()
if (jQuery.browser.msie)
$('#content').animate({ height: servContentHeight + 50 }, 500)
else
$('#content').animate({ height: servContentHeight }, 500)
});
});
$(function(){
$('#menuOurGuarantee').click(function(){
$('#home').fadeOut()
$('#services').fadeOut()
$('#ourGuarantee').fadeIn()
$('#contact').fadeOut()
$('#cleaningTips').fadeOut()
$('#aboutUs').fadeOut()
if (jQuery.browser.msie)
$('#content').animate({ height: guarContentHeight + 50 }, 500)
else
$('#content').animate({ height: guarContentHeight }, 500)
});
});
$(function(){
$('#menuContact').click(function(){
$('#home').fadeOut()
$('#services').fadeOut()
$('#ourGuarantee').fadeOut()
$('#contact').fadeIn()
$('#cleaningTips').fadeOut()
$('#aboutUs').fadeOut()
if (jQuery.browser.msie)
$('#content').animate({ height: contContentHeight + 50 }, 500)
else
$('#content').animate({ height: contContentHeight }, 500)
});
});
$(function(){
$('#menuCleaningTips').click(function(){
$('#home').fadeOut()
$('#services').fadeOut()
$('#ourGuarantee').fadeOut()
$('#contact').fadeOut()
$('#cleaningTips').fadeIn()
$('#aboutUs').fadeOut()
if (jQuery.browser.msie)
$('#content').animate({ height: cleaContentHeight + 50 }, 500)
else
$('#content').animate({ height: cleaContentHeight }, 500)
});
});
$(function(){
$('#menuAboutUs').click(function(){
$('#home').fadeOut()
$('#services').fadeOut()
$('#ourGuarantee').fadeOut()
$('#contact').fadeOut()
$('#cleaningTips').fadeOut()
$('#aboutUs').fadeIn()
if (jQuery.browser.msie)
$('#content').animate({ height: abouContentHeight + 50 }, 500)
else
$('#content').animate({ height: abouContentHeight }, 500)
});
});