Mochkit JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. Mochkit
  4. Test Effects


        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


    Test Effects
    
    
    
h3 {
    clear: both;
}
.example {
    font-size: 1.0em;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 112px;
    height: 112px;
    border: 4px solid #669;
    background-color: #ccf;
    text-align: center;
    padding: 1em 0.2em 0.2em 0.2em;
}
.demo {
    clear: both;
}
        
    
    
    
    
    function showEffect() {
      f = document.forms[0];
      v = f['effect'].value;
      if (v.substring(0, 1) == '+') {
        v = "MochiKit.Visual.toggle('demo-all','" + v.substring(1) + "'";
      } else {
        v = "MochiKit.Visual." + v + "('demo-all'";
      }
      if (f['slow'].checked) {
        v += ',{duration:4}';
      }
      v += ')';
      var v = eval(v);
    }
    function resetBox() {
      e = MochiKit.DOM.getElement('demo-all');
      MochiKit.Visual.appear(e);
      MochiKit.Style.setStyle(e, {});
    }
    


  

Here are demos of all combination effects:



      
        Click for Visual.appear demo
      

      
        Click for Visual.fade demo
      

      
        Click for Visual.puff demo
      

      
        Click for Visual.blindDown demo
      
      
        Click for Visual.blindUp demo
      
      
        Click for Visual.switchOff demo
      
      
        Click for Visual.slideDown demo
      
      
        Click for Visual.slideUp demo
      
      
        Click for Visual.dropOut demo
      
      
        Click for Visual.shake demo
      
      
        Click for Visual.pulsate demo
      
      
        Click for Visual.squish demo
      
      
        Click for Visual.fold demo
      
       
        Click for Visual.grow demo
      
      
        Click for Visual.shrink demo
      
      
        Click for Visual.Highlight demo
      

  

Here are all demos on one single element:


  
    Click to see the selected effect
  

  
  
    
      appear
      fade
      puff
      blindDown
      blindUp
      slideDown
      slideUp
      switchOff
      dropOut
      shake
      pulsate
      squish
      fold
      grow
      shrink
      Highlight
    
    
      appear
      blind
      slide
      size
    
  
   
   in slow-motion
  
  
  
  
  


  

Links to other samples:


  
    
  • Big slide effects

    •     
  • Slide effects

    •     
  • Blind effects

    •     
  • Blind/Slide effects

    •     
  • Fade/Appear effects

    •   
      
        
  • Onload effects

    •     
  • Scroll effects

    •     
  • Grow/Shrink effects

    •     
  • Queue effects

    •     
  • Queue limit effects

    •