jQuery UI展示 jQueryUI展示|jQueryUI

jQuery show()方法用于管理jQueryUI视觉效果。旨在使用指示的效果显示项目。它指定包装在指定效果中的元素的可见性。
句法：

.show( effect [, options ] [, duration ] [, complete ] )

show方法的参数：

效果：此参数指定用于过渡的效果。
选项：用于指定效果的特定设置和缓动。每个效果都有其自己的一组选项。
持续时间：这指定持续时间并指示效果的毫秒数。其默认值为400。
完成：这是一种回调方法。当元素的效果完成时, 将为每个元素调用该函数。

jQuery UI显示示例【jQuery UI展示】让我们以一个示例来演示jQuery UI show()方法

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI show Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/0134305J7-0.jpg"> < /script> < script src="http://img.readke.com/220430/0134303326-1.jpg"> < /script> < !-- CSS --> < style> .toggler { width: 500px; height: 200px; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 155px; 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() { // run the effect $( "#effect" ).show( "shake", {times: 15, distance: 200}, 1000, callback); }; //callback function to bring a hidden box back function callback() { setTimeout(function() { $( "#effect:visible" ).removeAttr( "style" ).fadeOut(); }, 1000 ); }; $( "#button" ).click(function() { runEffect(); return false; }); $( "#effect" ).hide(); }); < /script> < /head> < body> < div class="toggler"> < div id="effect" class="ui-widget-content ui-corner-all"> < h3 class="ui-widget-header ui-corner-all"> Show< /h3> < p> srcmini provides easy and point to point learning of various tutorials such as Java Tutorial, Core Java Tutorial, Android, Design Pattern, JavaScript, AJAX, Python etc. < /p> < /div> < /div> < a href="http://www.srcmini.com/#" id="button" class="ui-state-default ui-corner-all"> Show method with Shake effect< /a> < /body> < /html>

立即测试