Simple jQuery problem with fading In/Out

zeckdude · 01-22-2009, 05:29 AM

I have two buttons at the bottom of my page that are supposed to fade in two different content areas.

In firefox, It 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 the page at: http://www.idea-palette.com/testfolder/pagetest3c.html

bgallegos · 01-23-2009, 02:57 PM

It would be easier if you posted the code pertaining to this so no one has to go digging.

zeckdude · 01-23-2009, 04:28 PM

Here's my jQuery to fade in the different content areas:

Code:

$(document).ready(function() {

     $("#areatwo").hide();
     
     $("#button2").click(function() {
           $("#areaone").fadeOut(1500,function(){
               $("#areatwo").fadeIn(1500);
           });
     });

     $("#button1").click(function() {
           $("#areatwo").fadeOut(1500,function(){
               $("#areaone").fadeIn(1500);
           });
     });

});

This is my body content that is affected by the jQuery. Here's the two content areas that fade in when the appropriate buttons are pushed:

Code:

<div id="areaone">     
        <div id="slideshow" class="fadeincontent">
                <div id="fadetest">
                        <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb1b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                        <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb2b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                        <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb3b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                        <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb4b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                        <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb5b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                </div>                                           
               <div id="slidenav" class="nav">
                        <a id="prev2" href="#"> <span>Back</span></a>                          
                        <a id="next2" href="#"> <span>Forward</span> </a>
                        <span style="position:relative; left: 90px; top:7px; font-weight:500; font-size:11px;">
                            Click on Slideshow to Launch
                        </span>
                </div>
         </div>
</div> 

<div id="areatwo" class="fadeincontent">
        <img src="images/poster_thumb3b.gif" />
</div>

Here are the buttons that make the fading happen when clicked on:

Code:

<div id="buttonstofade">
                <center><span class="fadebutton"><a id="button1" href="#">First
        Content Area</a></span></center>
                <center><span class="fadebutton"><a id="button2" href="#">Second
        Content Area</a></span></center>
</div>

bgallegos · 01-23-2009, 04:52 PM

I was able to use your code and create a test page. It seems to work fine.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>Untitled Document</title>
        
        <!--jQuery 1.3-->
        <script src="js/jquery/jquery-1.3.min.js" type="text/javascript"></script>
        
        <!--jQuery UI 1.6rc4-->
        <script src="js/jquery/jquery-ui-1.6rc4.min.js" type="text/javascript"></script>
        
        <style>
			div#areaone {
				background-color:#FF0000;
				color:#ffffff;
			}
		
			div#areatwo {
				background-color:#000000;
				color:#ffffff;
			}
		</style> 
        
        <script>
			$(function() {
				 $("#areatwo").hide();
				 
				 $("#button2").click(function() {
					   $("#areaone").fadeOut(1500,function(){
						   $("#areatwo").fadeIn(1500);
					   });
				 });
			
				 $("#button1").click(function() {
					   $("#areatwo").fadeOut(1500,function(){
						   $("#areaone").fadeIn(1500);
					   });
				 });

			});
		</script>                 
    
    </head>
    
    <body>
        	
        <div id="areaone">
            This is area one<br/> 
            This is area one<br/>
            This is area one<br/>
            This is area one<br/>
            This is area one<br/>
            This is area one<br/>
            This is area one<br/>                                                         
        </div>
        
        <div id="areatwo">
        	This is area two<br/>
            This is area two<br/>
            This is area two<br/>
            This is area two<br/>
            This is area two<br/>
            This is area two<br/>
            This is area two<br/>
        </div>
        
        <a id="button1" href="#">First Content Area</a><br/>
        <a id="button2" href="#">Second Content Area</a>
    
    </body>
</html>

I noticed you have a slideshow in the first content area. Maybe there is a conflict?

zeckdude · 01-23-2009, 06:21 PM

I think that is exactly the problem, but I'm not sure how the slideshow, which is using the jQuery Cycle Plugin, is conflicting with the fadeIn and fadeOut functions.

Quote:

Originally Posted by bgallegos

I was able to use your code and create a test page. It seems to work fine.

I noticed you have a slideshow in the first content area. Maybe there is a conflict?