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