Learn ASP.NET: Jquery Hide

jQuery UI Effects - Hide Demo

Today we will see the power of Jquery and the ease with which we can hide the elements.

Normally we hide the elements using the style property or using visible property of an element.

But we can add some good effects provided by Jquery which will animate our page and provide some good effects for the user.

Continue reading to unleash the effects which you can use in your page......

Hide

This is Demo for all effects provided through hide in jquery. Try various combinations using below options.

Run Effect

Code Sample:



<!doctype html>



 



<html lang="en">



<head>



  <meta charset="utf-8" />



  <title>jQuery UI Effects - Hide Demo</title>



  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />



  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>



  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>



  <link rel="stylesheet" href="/resources/demos/style.css" />



  <style>



  .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; }



  </style>



  <script>



  $(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 = {};



      // some effects have required parameters



      if ( selectedEffect === "scale" ) {



        options = { percent: 0 };



      } else if ( selectedEffect === "size" ) {



        options = { to: { width: 200, height: 60 } };



      }



 



      // run the effect



      $( "#effect" ).hide( selectedEffect, options, 1000, callback );



    };



 



    // callback function to bring a hidden box back



    function callback() {



      setTimeout(function() {



        $( "#effect" ).removeAttr( "style" ).hide().fadeIn();



      }, 1000 );



    };



 



    // set effect from select menu value



    $( "#button" ).click(function() {



      runEffect();



      return false;



    });



  });



  </script>



</head>



<body>



 



<div class="toggler">



  <div id="effect" class="ui-widget-content ui-corner-all">



    <h3 class="ui-widget-header ui-corner-all">Hide</h3>



    <p>



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



    </p>



  </div>



</div>



 



<select name="effects" id="effectTypes">



  <option value="blind">Blind</option>



  <option value="bounce">Bounce</option>



  <option value="clip">Clip</option>



  <option value="drop">Drop</option>



  <option value="explode">Explode</option>



  <option value="fold">Fold</option>



  <option value="highlight">Highlight</option>



  <option value="puff">Puff</option>



  <option value="pulsate">Pulsate</option>



  <option value="scale">Scale</option>



  <option value="shake">Shake</option>



  <option value="size">Size</option>



  <option value="slide">Slide</option>



</select>



 



<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>



 



 



</body>



</html>

Learn ASP.NET

Pages

Sunday, 10 November 2013

Jquery Hide

Hide

No comments:

Post a Comment

SOCIAL NETWORKING