极客教程jQuery UI show()方法
jQuery UI框架的show()方法为匹配的选定元素显示或管理所有类型的视觉效果，这些元素的样式是在用户界面的CSS代码中设计的。
语法:
(selector).show( effectType[, options ] [, duration ] [, complete ] );
参数：它接受一个参数 “effectType”，这是将要添加的视觉效果的类型。
- effectType。该类型是字符串。它指定了用于过渡的效果类型。
- options。类型为对象。它指定了缓和的具体设置所需的选项。
- duration。类型是数字或字符串。这指定了动画效果应该运行多长时间，例如快、慢或400ms。
- complete。这是一个回调方法，在动画效果完成时被调用。
返回值：它返回具有给定视觉效果的选定元素。
jQuery UI的链接：
<link
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
例子1：在下面的例子中，show()函数是用jQuery代码实现的，摇动效果类型和时间、距离作为它的选项，还有一个回调函数作为它的参数，显示匹配元素的视觉效果。回调函数在效果完成或在屏幕上完成后被调用。在这个过程中，回调函数在效果完成后淡出容器。
<!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</title>
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
.height {
height: 10px;
}
.divClass {
width: 400px;
height: 180px;
}
#btnID {
padding: .5em 1em;
text-decoration: none;
}
#container {
position: relative;
width: 260px;
height: 145px;
padding: 0.3em;
border: 1px solid black
}
</style>
<script>
(function () {
function showEffect() {
// Run the show method with shake effect
("#container").show("shake", { times: 10,
distance: 200 }, 2000, callback);
};
// Callback method
function callback() {
setTimeout(function () {
("#container:visible")
.removeAttr("style").fadeOut();
}, 2000);
};
("#btnID").click(function () {
showEffect();
return false;
});
$("#container").hide();
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI show method </b>
<div class="height"></div>
<div class="divClass">
<div id="container">
<p>
This is jQuery UI show method demonstration,
which displays the matched elements.The
matched element will show the element with
the chosen effect in the jQuery code.
</p>
</div>
</div>
<div class="height"></div>
<button id="btnID">Show effect</button>
</body>
</html>
输出:
例子2：在下面的例子中，show()方法的简单实现是在jQuery代码中完成的，其参数是反弹的视觉效果。ui-corner-all和ui-state-default是jQuery UI CSS框架提供的内置类，使用户界面更加互动和美观。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI Show Method with bounce effect
</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"http://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"http://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<style>
#btnID {
padding: .4em 1.5em;
text-decoration: none;
}
.highlight {
color: #090;
font-family: Calibri;
font-size: 2em;
text-shadow: 2px 2px #FF0000;
}
.height {
height: 10px;
}
</style>
<script>
(document).ready(function () {
("h2").hide();
("#btnID").click(function () {
// Show with bounce effect
("h2").show("bounce", 3000);
})
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI show method with bounce effect</b>
<div class="height"></div>
<h2 class="highlight">Learning jQuery UI </h2>
<button id="btnID"
class="ui-corner-all ui-state-default">
Show effect
</button>
</body>
</html>
输出:
例子3： jQuery UI框架提供了show()方法，它的参数是许多种类的视觉效果。在下面的例子中，我们将用一个组合框菜单选项来演示该方法，让用户选择一个视觉效果类型。当用户选择了效果类型后，它被传递给show()方法进行输出，如输出图片所示。程序员可以根据项目要求来编写代码和选择参数。
<!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=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"http://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"http://code.jquery.com/ui/1.11.2/jquery-ui.js">
</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>
输出:
