Log in

View Full Version : fade question


tetrix
01-27-2008, 01:21 PM
the script below is able to fade two images onload,it is just a function repeated 2 times so i can have one image that fades in and the other fades out, my question is: how can i make the second image start to fade when the first image fade has complete?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<!--<script language="JavaScript" src="core.js" type="text/javascript"></script>-->
<script language="JavaScript" type="text/javascript">



function initImage() {
var image = document.getElementById('image');
setOpacity(image, 100);
fadeIn('image',100);
}

function fadeIn(objId,opacity2) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity2 >= 0) {
setOpacity(obj, opacity2);
opacity2 -= 4;
window.setTimeout("fadeIn('"+objId+"',"+opacity2+")", 50);
}
}
}
function setOpacity(obj, opacity2) {
opacity2 = (opacity2 == 100)?99.999:opacity2;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity2+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity2/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity2/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity2/100;
}






function initImage1() {
var image1 = document.getElementById('text');
setOpacity1(image1, 0);
fadeIn1('text',0);
}

function fadeIn1(objId,opacity1) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity1 >= 0) {
setOpacity1(obj, opacity1);
opacity1 +=2;
window.setTimeout("fadeIn1('"+objId+"',"+opacity1+")", 200);
}
}
}
function setOpacity1(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}












FuncOL = new Array();
function StkFunc(Obj) {
FuncOL[FuncOL.length] = Obj;
}

window.onload = function() {
for(i=0; i<FuncOL.length; i++)
{FuncOL[i]();}
}

StkFunc(initImage);
StkFunc(initImage1);



</script>


<style type="text/css">
body{
font-family:Times New Roman;
margin:0;
padding:0;
}
.menu{
position: absolute;
z-index:2;
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}
.menu li a{
color:gray;
display: block;
width: 100%;
text-decoration: none;
line-height:15px;
}
.menu li a:hover, .menu li a:active{
color: black;
}
#image{
position: absolute;
z-index:1;
}
#image2{
position:absolute ;
z-index:0 ;
}
#text{
position:absolute ;
top:270px ;
z-index:0 ;
}



</style>


</head>

<body>
<ul class="menu">

<br><br>
<li><a href="#">Recent</a></li>
<li><a href="#">Select Work</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<div id="image"><img src="ours.jpg"/></div>
<div id="text"><img src="text.png"/></div>





</body>
</html>
jscheuer1
01-27-2008, 04:47 PM
Your code configures both functions for execution onload by including them here:


StkFunc(initImage);
StkFunc(initImage1);

If everything else were written logically, all you would have to do is remove one of those statements and call the other when the one you keep as onload has completed.

However, one of your functions isn't completely logical:


function fadeIn1(objId,opacity1) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity1 >= 0) {
setOpacity1(obj, opacity1);
opacity1 +=2;
window.setTimeout("fadeIn1('"+objId+"',"+opacity1+")", 200);
}
}
}

In that function, opacity1 will either always be >=0, or it will never be. When you do this first, as is done in your code:


function initImage1() {
var image1 = document.getElementById('text');
setOpacity1(image1, 0);
fadeIn1('text',0);
}

it will always be.

So, first change fadeIn1 to:


function fadeIn1(objId,opacity1) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity1 < 100) {
setOpacity1(obj, opacity1);
opacity1 +=2;
window.setTimeout("fadeIn1('"+objId+"',"+opacity1+")", 200);
}
}
}

Now you pick whichever one you want to happen onload and keep it here:


StkFunc(initImage);
StkFunc(initImage1);


Let's say it's initImage, then use just:


StkFunc(initImage);

and at the end of fadeIn, do this:


function fadeIn(objId,opacity2) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity2 >= 0) {
setOpacity(obj, opacity2);
opacity2 -= 4;
window.setTimeout("fadeIn('"+objId+"',"+opacity2+")", 50);
}
else
initImage1();
}
}

If you want the order of the actions reversed, you could keep the other init and add the first one to the end of the other fadeIn.

Note: There are other things I don't like about this code, and there could be other problems. But, the above answers your question.
tetrix
01-27-2008, 07:40 PM
thank you it's almost working but both images still show up on onload.
jscheuer1
01-27-2008, 09:03 PM
Please post a link to the page on your site that contains the problematic code so we can check it out.
tetrix
01-27-2008, 10:12 PM
hi,
here is the webpage: http://jcristobal.free.fr/index.htm you will see what is happening as it is a bit hard to explain with words. thanks
jscheuer1
01-29-2008, 03:26 PM
I think that your problem is simply one of logic, however it isn't clear to me what you want to have happen, perhaps that is because it isn't clear to you either. You have three images. In the style section, they have no setting for opacity, so since your script does nothing until onload, they will all start out at 100% opacity. As a result, the only one you will see at first should be the one with the highest z-index - the id="image" one. After load, you set the id="image" one to 100% opacity, which should do nothing, then you proceed to fade it in, but the function really is fading it out. This should result in your seeing the underneath images, and does. When that's done, you fade in the id="text", but it is already visible, so it disappears and then fades in.

I think all that you need to do is add:


function initImage() {
var image = document.getElementById('image');
var t=document.getElementById('text')
setOpacity(t, 0);
setOpacity(image, 100);
fadeIn('image',100);
}

But, I'm not certain if this is the effect you are after. It might also be a nice touch to make the id="text" and the id="image2" display none or visibility hidden, until you are sure the id="image" is loaded.
tetrix
02-05-2008, 06:50 PM
thank you this was exactly the effect i was looking for, i started doing it all again with prototype.i might post some code if i need help.
thanks again