jQuery Effect Not Working in IE7
Posted: Tue Jul 21, 2009 3:03 pm
Hello!
I created a simple slideshow using jQuery, and, for some reason, it doesn't work in IE7 (and maybe other versions of IE as well).
Here is the link: http://unitedfrontmn.org/website/
Please look at the top slideshow with the "1 2 3" controls. Click one of those numbers and notice that nothing happens in IE7. Everything works fine in Firefox, Safari, and Chrome.
My code is called from the head of the page and reads:
I have tried to solve the problem by moving my jQuery code to the bottom of my html, and trying different variable declarations.
Do you know why this is happening? Have any ideas?
Thank you!
Sarah
I created a simple slideshow using jQuery, and, for some reason, it doesn't work in IE7 (and maybe other versions of IE as well).
Here is the link: http://unitedfrontmn.org/website/
Please look at the top slideshow with the "1 2 3" controls. Click one of those numbers and notice that nothing happens in IE7. Everything works fine in Firefox, Safari, and Chrome.
My code is called from the head of the page and reads:
Code: Select all
jQuery(document).ready(function(){
var fcTransitionLength = 400;
jQuery(".button1").click(function(){
jQuery(".button1").css({'background-color' : '#7a7a7a', 'color' : '#fff'});
jQuery(".button2").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
jQuery(".button3").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
jQuery(".image2").fadeOut(fcTransitionLength);
jQuery(".fcText2").fadeOut(fcTransitionLength);
jQuery(".image3").fadeOut(fcTransitionLength);;
jQuery(".fcText3").fadeOut(fcTransitionLength,function(){
jQuery(".image1").fadeIn(fcTransitionLength);
jQuery(".fcText1").fadeIn(fcTransitionLength);});
});
jQuery(".button2").click(function(){
jQuery(".button1").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
jQuery(".button2").css({'background-color' : '#7a7a7a', 'color' : '#fff'});
jQuery(".button3").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
jQuery(".image1").fadeOut(fcTransitionLength);
jQuery(".fcText1").fadeOut(fcTransitionLength);
jQuery(".image3").fadeOut(fcTransitionLength);
jQuery(".fcText3").fadeOut(fcTransitionLength,function(){
jQuery(".image2").fadeIn(fcTransitionLength);
jQuery(".fcText2").fadeIn(fcTransitionLength);});
});
jQuery(".button3").click(function(){
jQuery(".button1").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
jQuery(".button2").css({'background-color' : '#f3f3f4', 'color' : 'inherit'});
jQuery(".button3").css({'background-color' : '#7a7a7a', 'color' : '#fff'});
jQuery(".image1").fadeOut(fcTransitionLength);
jQuery(".fcText1").fadeOut(fcTransitionLength);
jQuery(".image2").fadeOut(fcTransitionLength);
jQuery(".fcText2").fadeOut(fcTransitionLength,function(){
jQuery(".image3").fadeIn(fcTransitionLength);
jQuery(".fcText3").fadeIn(fcTransitionLength);});
});
});Do you know why this is happening? Have any ideas?
Thank you!
Sarah