<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
">
<
title
>jQuery UI Show Method with All effects</
title
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
.height {
height: 10px;
}
.divClass {
width: 500px;
height: 200px;
}
#btnID {
padding: .4em 1em;
text-decoration: none;
}
#container {
width: 250px;
height: 180px;
padding: 0.5em;
position: relative;
}
#container h4 {
margin: 0;
padding: 0.3em;
text-align: center;
}
</
style
>
<
script
>
$(function () {
// show the selected effect
// type by the user
function showEffect() {
var effectType = $("#typesOfEffectId").val();
// show the effect with call back
$("#container").show(effectType, 800, callback);
};
// Callback function to get original state
function callback() {
setTimeout(function () {
$("#container:visible")
.removeAttr("style").fadeOut();
}, 2000);
};
// Set effect from select menu value
$("#btnID").on("click", function () {
showEffect();
});
$("#container").hide();
});
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
b
>jQuery UI show method with all type of effects</
b
>
<
div
class
=
"height"
></
div
>
<
div
class
=
"divClass"
>
<
div
id
=
"container"
class
=
"ui-widget-content ui-corner-all"
>
<
h4
class
=
"ui-widget-header ui-corner-all"
>Show</
h4
>
<
p
>
In this tutorial, we are going to learn about
jQuery UI framework show method with different
variety of effects.
</
p
>
</
div
>
</
div
>
<
select
name
=
"effectTypes"
id
=
"typesOfEffectId"
>
<
option
value
=
"blind"
>Blind</
option
>
<
option
value
=
"clip"
>Clip</
option
>
<
option
value
=
"drop"
>Drop</
option
>
<
option
value
=
"explode"
>Explode</
option
>
<
option
value
=
"fade"
>Fade</
option
>
<
option
value
=
"fold"
>Fold</
option
>
<
option
value
=
"highlight"
>Highlight</
option
>
<
option
value
=
"puff"
>Puff</
option
>
<
option
value
=
"pulsate"
>Pulsate</
option
>
<
option
value
=
"slide"
>Slide</
option
>
</
select
>
<
button
id
=
"btnID"
class
=
"ui-state-default ui-corner-all"
>
show Effect
</
button
>
</
body
>
</
html
>