Hide And Show Effects in Jquery UI

Date Published: 07/05/2020Published By: JaiSchool

You can use hide and show options of Jquery UI to give effects when something is opened or closed respectively. This hide option has some property, for example, an event property to give the effect name, duration to define the timing (in milliseconds) of effect, etc.

Example:-

hide option

hide:{
effect:shake,
duration:500
}

show option

show:{
effect:slide,
duration:1000
}

Hide and Show effects list

Hide and Show Effects in Jquery UI
bounce
shake
fold
puff
fade
slide
size
scale
blind
clip
drop
explode
highlight
pulsate

bounce effect Example:-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Tabs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>

<div class="menu">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#html">HTML</a></li>
  <li><a href="#css">CSS</a></li>
</ul>

<!--containers coding start-->

<div id="home">
  <p>Welcome to <mark>Home</mark> page.</p>
</div>

<div id="html">
  <p>Welcome to <b>HTML</b> page.</p>
</div>

<div id="css">
  <p>Welcome to <strong>CSS</strong> page.</p>
</div>

<!--end containers coding-->
</div>

<script>
  $(document).ready(function(){
    $(".menu").tabs({
      active:0,
      event:"click",
      hide:{
          effect:"bounce",
        },
      show:{
          effect:"slide",
        },
    });
  });
  </script>
</body>
</html>

Similarly you can use other effects.

Publish A Comment

Leave a Reply

Your email address will not be published.