Thanks for your help RSol!
I did what you said, but I'm experiencing problems. In firefox, It still won't fade in the second area, and it wont fade back to the first area either. So pretty much, none of it works in Firefox. In Internet Explorer, the first area cuts away before the second area fades in. Also, after the second area fades away again, the first area just cuts back in. It seems as though the fade settings don't work on the first content area. I hope you can help me out! I have posted my new revised page with the directions you gave me at: http://www.idea-palette.com/testfolder/pagetest3c.html RSol wrote: > > > Try this: > > <html xmlns="http://www.w3.org/1999/xhtml";><head> > > <script type="text/javascript" src="pagetest3b_files/jquery.min.js"></ > script> > <script type="text/javascript"> > > $(document).ready(function() { > > $("#area2").hide(); > $("#button2").click(function() { > $("#area1").fadeOut(1500,function(){ > $("#area2").fadeIn(1500); > }); > }); > > $("#button1").click(function() { > $("#area2").fadeOut(1500,function(){ > $("#area1").fadeIn(1500); > }); > }); > > }); > </script> > </head><body> > > <div id="box"> > <div class="fadeinarea"> > <div id="area1"> > pagetest3b_files/poster_thumb1b.gif > </div> > <div id="area2"> > pagetest3b_files/poster_thumb2b.gif > </div> > </div> > > <div id="buttonstofade"> > <center> # First > Content Area </center> > <center> # Second > Content Area </center> > </div> > > </body></html> > > -- View this message in context: http://www.nabble.com/Simple-jQuery-problem-with-fading-In-Out-tp21561440s27240p21593772.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
