jQuery UI隐藏 jQueryUI隐藏|jQueryUI

jQuery hide()方法用于管理jQuery UI视觉效果。它应用动画效果来隐藏元素。
句法：

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

hide方法的参数：

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

jQuery UI hide()方法的示例让我们以hide()方法为例, 说明jQuery UI的抖动效果。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI hide 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/0049532215-0.jpg"> < /script> < script src="http://img.readke.com/220430/004953OI-1.jpg"> < /script> < !-- CSS --> < style> .toggler-1 { width: 500px; height: 200px; } #button-1 { padding: .5em 1em; text-decoration: none; } #effect-1 { width: 240px; height: 160px; padding: 0.4em; position: relative; } #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; } < /style> < script> $(function() { function runEffect() { $( "#effect-1" ).hide( "shake", {times: 10, distance: 200}, 1000, callback ); }; // callback function to bring a hidden box back function callback() { setTimeout(function() { $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // set effect from select menu value $( "#button-1" ).click(function() { runEffect(); return false; }); }); < /script> < /head> < body> < div class="toggler-1"> < div id="effect-1" class="ui-widget-content ui-corner-all"> < h3 class="ui-widget-header ui-corner-all"> Hide< /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, Cloud Computing, Python etc. < /p> < /div> < /div> < a href="http://www.srcmini.com/#" id="button-1" class="ui-state-default ui-corner-all"> Shake Effect Hide< /a> < /body> < /html>

【jQuery UI隐藏】立即测试