...

View Full Version : 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:


$(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:


<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:


<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.


<!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.




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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum