Web Analytics Made Easy -
StatCounter FadeIn FadeOut source code - CodingForum

Announcement

Collapse
No announcement yet.

FadeIn FadeOut source code

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • FadeIn FadeOut source code

    I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it

    do anyone know, how can i write fadein and fadeout functions? is anyone know its source code?

    Best Morteza

  • #2
    Code:
    function fade(elm, boolFadeIn, cb ){ 
         var i=1, ii = 1, st=setTimeout, es=elm.style, del=fade.del || 40;
    	if(cb && cb.charAt){ cb = Function("element", "hidden", cb); }
    	if(boolFadeIn && boolFadeIn !="out" ){
                    if(es.display=="block"){return elm;}
    		es.display= elm.od || "block";
    	   	for ( i = 1; i < 11; i++){   
    	      		st(  function(){ trans(elm, ii++ * 10);}, i * del );
    		} 
    	   	st(  function(){ es.filter=null;  if(cb){ cb.call(elm,elm,100);}  }, 12 * del );
    	}else{
    		 elm.od =  es.display !== "none" ? es.display : "";
    		 for ( i = 1; i < 11; i++){   
    		 	st(  function(){ trans(elm, (10 - ii++) * 10);}, 400 - i * del );
    	 	}
    	   	st(  function(){ es.display="none";  trans(elm, 100); if(cb){ cb.call(elm,elm,0);} }, 12 * del );
    	  }
       return elm;
    }//end fade
    fade.del=50; //optional global delay between opacity step
    function trans(elm, opacity) {  elm.style.opacity = (opacity / 100);}
    if("\v"=="v"){ trans= function transIE(elm, opacity) {   elm.style.filter = "alpha(opacity=" + opacity + ")";}; }
    
    
    
    
    
    
    //usage. firebug example (or anything with window.console)
    function report(elm, currentPercentOpacity){
       console.log([elm,currentPercentOpacity]);
    }
    
    
    fade(document.body, "out", report ); //fade all out
    
    setTimeout(function(){ //fade back in after 3.5 seconds
      fade(document.body, "in", report);
    }, 3500);
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

    Comment


    • #3
      thanks alot for answering.

      but it not work. may you please explain on below example.


      there is "fadeBlock" that its display is none by default. onmouseover of maintag, "fadeBlock" do fadeIn and in the onmouseout, it fade out.

      ---------------------
      Code:
          <div id="mailntag" style="background-color:Purple" onmouseover="/*fade in fadeBlock*/" onmouseout=" /*fade out fadeBlock*/ " >
           <br />
           <br />
           <div id="fadeBlock" style="background-color:Lime;width:250px;
            height:65px;text-align:center;display:none">
            <br />
            I'm Some Text
           </div>
           <br />
           <br />
           </div>

      Comment


      • #4
        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>
            <div id="mailntag" style="background-color:Purple" onmouseover="F1.Fade(100);" onmouseout="F1.Fade(0);" >
             <br />
             <br />
             <div id="fadeBlock" style="background-color:Lime;width:250px;
              height:65px;text-align:center;display:none" >
              <br />
              I'm Some Text
             </div>
             <br />
             <br />
             </div>
        
        <script type="text/javascript">
        /*<![CDATA[*/
        
        function Fade(o){
         var oop=this,obj=document.getElementById(o.ID);
         this.obj=obj;
         this.ms=typeof(o.Duration)=='number'?o.Duration:1000;
         this.now=0;
        }
        
        Fade.prototype={
        
         Fade:function(f){
          var e=window.event||arguments.callee.caller.arguments[0],obj;
          if (e.type=='mouseout'){
           obj=e.relatedTarget?e.relatedTarget:e.toElement;
           while (obj.parentNode){
            if (obj==this.obj.parentNode){
             return false;
            }
            obj=obj.parentNode;
           }
          }
          clearTimeout(this.to);
          this.obj.style.display='block';
          this.animate(this.now,f,new Date().getTime(),this.ms*(Math.abs((f-this.now)/100)));
         },
        
         animate:function(s,f,srt,mS){
          var oop=this,obj=this.obj,ms=new Date().getTime()-srt,d=(f-s)/mS*ms+s;
          if (isFinite(d)){
           oop.now=d;
           obj.style.filter='alpha(opacity='+d+')';
           obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=d/100-.001;
          }
          if (ms<mS){
           oop.dly=setTimeout(function(){ oop.animate(s,f,srt,mS); },10);
          }
          else if (f==0){
           oop.obj.style.display='none';
          }
         }
        
        }
        
        F1=new Fade({
         ID:'fadeBlock',
         Duration:1000
        });
        
        /*]]>*/
        </script>
             </body>
        
        </html>
        Last edited by vwphillips; Aug 26, 2011, 04:26 AM.
        Vic

        God Loves You and will never love you less.

        http://www.vicsjavascripts.org/Home.htm

        If my post has been useful please donate to http://www.operationsmile.org.uk/

        Comment

        Working...
        X