jQuery UI切换 jQueryUI切换|jQueryUI

jQuery toggle()方法用于根据元素是否隐藏来切换show()或hide()方法。
句法：

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

切换方法的参数：

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

jQueryUI切换示例让我们以具有爆炸效果的jQueryUI toggle()方法为例：

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Toggle 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/01355L4X-0.jpg"> < /script> < script src="http://img.readke.com/220430/01355J211-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() { function runEffect() { $( "#effect" ).toggle('explode', 300); }; $( "#button" ).click(function() { runEffect(); return false; }); }); < /script> < /head> < body> < div class="toggler"> < div id="effect" class="ui-widget-content ui-corner-all"> < h3 class="ui-widget-header ui-corner-all"> Toggle< /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, SQL, Python etc. < /p> < /div> < /div> < a href="http://www.srcmini.com/#" id="button" class="ui-state-default ui-corner-all"> Togglemethod with explode effect< /a> < /body> < /html>

【jQuery UI切换】立即测试