Gradualfader problem

**Scuba** · 02-26-2012, 09:59 AM

Good morning. I have a problem with the script gradualfader.js.

It is correctly installed on my website and works fine.

Only once when the mouse leaves the image it disappears ... we must return with the mouse to make it appear again ... But it does not do all the time. I tried with Internet Explorer, Firefox and Chrome and also .... This is the same on all browsers.

A solution?

Thank you in advance,

Scuba

**vwphillips** · 02-26-2012, 12:28 PM

it works on the script home page

please post a link to your page

**Scuba** · 02-26-2012, 12:45 PM

Originally Posted by vwphillips

it works on the script home page

please post a link to your page

OK, here's my website address: http://www.securacces.fr

(Yes I am French and my site too ...)

Move your mouse quickly from one image to another multiple times (some times it does right now)

Thank you in advance

**vwphillips** · 02-26-2012, 04:23 PM

I can not see anything wrong but fast mouseouts can be missed

so this ensures a fade out of the previous element on mouseover of another

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" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" class="gradualfader" />

<a href="http://www.dynamicdrive.com" class="anotherclass gradualfader"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" /></a>

<div style="width: 300px; border: 1px solid gray; background: blue" class="gradualfader2">
Some text here
</div>
<script type="text/javascript">

zxcFader={

 init:function(o){
  var oop,min=o.MinOpacity,min=typeof(min)=='number'&&min>0&&min<100?min:50,ms=o.Duration,ms=typeof(ms)=='number'&&ms<2?ms:1000,reg=new RegExp('\\b'+o.ClassName+'\\b'),els=document.body.getElementsByTagName('*'),ary=[],img,z0=0;
  oop=this[o.ClassName]={
   min:min,
   ms:ms,
   group:o.Group===true
  }
  for (;z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    img=els[z0].nodeName.toUpperCase()!='A'?els[z0]:els[z0].getElementsByTagName('IMG')[0];
    if (img){
     this.opacity(img,min);
     this.addevt(img,'mouseover','fade',true,ary.length,oop);
     this.addevt(img,'mouseout','fade',false,ary.length,oop);
     ary.push([img,min,null])
    }
   }
  }
  oop.ary=ary
 },

 fade:function(ud,nu,oop){
  var ary=oop.ary[nu],to=ud?100:oop.min;
  clearTimeout(ary[2]);
  if (ud&&this.lst&&ary[0]!=this.lst[2]){
   this.fade(false,this.lst[1],this.lst[0]);
  }
  this.animate(ary,ary[1],to,new Date(),Math.max(oop.ms*Math.abs((to-ary[1])/(100-oop.min)),2));
  if (ud){
   this.lst=[oop,nu,ary[0]];
  }
 },

 animate:function(ary,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   now=Math.min(Math.max(now,0),100);
   ary[1]=now;
   oop.opacity(ary[0],now);
  }
  if (ms<mS){
   ary[2]=setTimeout(function(){ oop.animate(ary,f,t,srt,mS); },10);
  }
  else {
   ary[1]=t;
   oop.opacity(ary[0],t);
  }
 },

 opacity:function(obj,opc){
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 },

 addevt:function(o,t,f,p,p1,p2){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
 }

}


zxcFader.init({
 ClassName:'gradualfader', // the common class name of the elements to fade.       (string)
 Duration:2000,            //(optional) the duration of the fade in milli seconds. (number, default == 1000)
 MinOpacity:20             //(optional) minimum opacity.                           (number, default == 50)
});

zxcFader.init({
 ClassName:'gradualfader2'
});

</script>

</body>

</html>

Thread: Gradualfader problem

Thread Tools

Search Thread

Gradualfader problem

Bookmarks

Bookmarks

Posting Permissions