JQuery JavaScript Tutorial





  jQuery UI Effects - Hide Demo
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    .toggler { width: 500px; height: 200px; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
    .ui-effects-transfer { border: 2px dotted gray; } 
  
  
  $(function() {
    //run the currently selected effect
    function runEffect(){
      //get effect type from 
      var selectedEffect = $('#effectTypes').val();
      
      //most effect types need no options passed by default
      var options = {};
      //check if it's scale, transfer, or size - they need options explicitly set
      if(selectedEffect == 'scale'){  options = {percent: 0}; }
      else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
      else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
      
      //run the effect
      $("#effect").hide(selectedEffect,options,500,callback);
    };
    
    //callback function to bring a hidden box back
    function callback(){
      setTimeout(function(){
        $("#effect:hidden").removeAttr('style').hide().fadeIn();
      }, 1000);
    };
    
    //set effect from select menu value
    $("#button").click(function() {
      runEffect();
      return false;
    });
  });
  




  
    Hide
    


      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    


  



  Blind
  Bounce
  Clip
  Drop
  Explode
  Fold
  Highlight
  Puff
  Pulsate
  Scale
  Shake
  Size
  Slide
  Transfer

Run Effect


Click the button above to preview the effect.