html 隐藏hide,jQuery UI 实例

jQuery UI 实例 - 隐藏(Hide)

使用自定义效果来隐藏匹配的元素。

如需了解更多有关 .hide() 方法的细节，请查看 API 文档 .hide()。

.hide() 演示

点击按钮预览特效。

jQuery UI 特效 - .hide() 演示

.toggler { width: 500px; height: 200px; }

#button { padding: .5em 1em; text-decoration: none; }

#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }

#effect h3 { margin: 0; padding: 0.4em; text-align: center; }

$(function() {

// 运行当前选中的特效

function runEffect() {

// 从中获取特效类型

var selectedEffect = $( "#effectTypes" ).val();

// 大多数的特效类型默认不需要传递选项

var options = {};

// 一些特效带有必需的参数

if ( selectedEffect === "scale" ) {

options = { percent: 0 };

} else if ( selectedEffect === "size" ) {

options = { to: { width: 200, height: 60 } };

}

// 运行特效

$( "#effect" ).hide( selectedEffect, options, 1000, callback );

};

// 回调函数

function callback() {

setTimeout(function() {

$( "#effect" ).removeAttr( "style" ).hide().fadeIn();

}, 1000 );

};

// 根据选择菜单值设置特效

$( "#button" ).click(function() {

runEffect();

return false;

});

});

隐藏(Hide)

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.

百叶窗特效(Blind Effect)

反弹特效(Bounce Effect)

剪辑特效(Clip Effect)

降落特效(Drop Effect)

爆炸特效(Explode Effect)

折叠特效(Fold Effect)

突出特效(Highlight Effect)

膨胀特效(Puff Effect)

跳动特效(Pulsate Effect)

缩放特效(Scale Effect)

震动特效(Shake Effect)

尺寸特效(Size Effect)

滑动特效(Slide Effect)

运行特效