I'm new using jQuery and I have a problem trying to make a fadeIn work properly.
My client asked that the main section of the site (which may contain images, text, etc, and it's the only section that changes when navigating the site; header and footer are static) enters with a fadeIn. I made it work with the following code between the <head></head> tags:
The problem is, when moving between sections, sometimes I get a quick glimpse of this main div before it disappears to enter, the second time, with the fadeIn. I've made slight changes to the code, more as an experiment than really knowing what I'm doing, but I get the same result. It doesn't happen all the time or in every section, though. Could this be 'normal' behavior or browser-related? is it possible to correct it? My client is being very picky about this and I'm out of ideas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#divFadeIn {
opacity: 0;
filter:alpha(opacity=0);
border: 1px solid red;
}
</style>
<script type="text/javascript">
var curOpac = 0;
var speed = 0.2;
var fadeTimer;
function fadeIn(obj){
fadeTimer = setInterval(function(){setOpacity(obj)},100);
}
function setOpacity(obj) {
curOpac = curOpac + speed;
if(curOpac <= 10){
setOpacityCSS(obj);
}
}
function setOpacityCSS(obj){
if(typeof(obj.style.opacity) == 'string'){
obj.style.opacity = curOpac/10;
} else {
obj.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
}
}
window.onload=function(){
oDivFadeIn = document.getElementById('divFadeIn');
oDivFadeIn.onmouseover=function(){fadeIn(this);}
oDivFadeIn.onmouseout=function(){
if(fadeTimer){clearInterval(fadeTimer);}
curOpac = 0;
setOpacityCSS(this);
}
}
</script>
</head>
<body>
<div id="divFadeIn">
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
aliquam non, taciti donec ut.
</div>
<div>
Hover anywhere above this to see the fade in div
</div>
</body>
</html>
It worked, the only thing is that I had to put the "display:none" property on the css and then that whole content disappears when javascript is disabled. To fix that I followed the suggestions from this post: http://greatwebguy.com/programming/c...-specific-css/ (hope it's okay to post, in case someone else finds it useful).
But happily I can say it's solved now. Thank you very much for replying
Thank you bullant, but I'm trying to get the fadeIn when entering each section of the site, not on moseover...
ok, no problem. I wasn't sure what you meant by "section".
To do it on page load without jQuery you could do something like this.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#divFadeIn {
opacity: 0;
filter:alpha(opacity=0);
border: 1px solid red;
}
</style>
<script type="text/javascript">
var curOpac = 0;
var speed = 0.2;
var fadeTimer;
function fadeIn(obj){
fadeTimer = setInterval(function(){setOpacity(obj)},100);
}
function setOpacity(obj) {
curOpac = curOpac + speed;
if(curOpac <= 10){
setOpacityCSS(obj);
}
}
function setOpacityCSS(obj){
if(typeof(obj.style.opacity) == 'string'){
obj.style.opacity = curOpac/10;
} else {
obj.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
}
}
window.onload=function(){
fadeIn(document.getElementById('divFadeIn'));
}
</script>
</head>
<body>
<div id="divFadeIn">
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
aliquam non, taciti donec ut.
</div>
<div>
Some other content
</div>
</body>
</html>
Before you post, read our: 
I wasn't sure what you meant by "section".
