jQuery UI 实例 - 特效（Effect）
jQuery UI 实例 - 特效（Effect）
什么是jQuery UI？
jQuery UI是一套基于jQuery的用户界面库，用于设计丰富的web应用程序，包括各种特效、交互和主题功能。
jQuery UI提供了各种UI部件和小组件，可以轻松地创建具有高可用性和易用性的交互式应用程序。
什么是特效（Effect）？
特效（Effect）是jQuery UI的一个强大的组件，它可以让你在页面中添加各种动态效果、动画特效和交互式体验。
特效（Effect）包括了jQuery UI内置的特效和用户自定义的特效，可以满足各种应用场景。
jQuery UI特效的常用方法
以下是jQuery UI特效的一些常用方法：
show/hide()
show()方法和hide()方法可以用于添加淡入淡出效果，比如悬浮提示框、对话框、菜单等。
$( "#myDiv" ).hide( "fade" );
$( "#myDiv" ).show( "puff" );
fadeIn()/fadeOut()
fadeIn()方法和fadeOut()方法可以用于添加渐隐效果，比如图片集、画廊、幻灯片等。
$( "#myDiv" ).fadeIn( "slow" );
$( "#myDiv" ).fadeOut( "fast" );
slideDown()/slideUp()
slideDown()方法和slideUp()方法可以用于添加滑动效果，比如抽屉、面板、切换按钮等。
$( "#myDiv" ).slideDown( "fast" );
$( "#myDiv" ).slideUp( "slow" );
animate()
animate()方法可以用于添加任何自定义动画效果，比如拖动、跟随、旋转、缩放等。
$( "#myDiv" ).animate({left: '+=100px'}, "slow");
$( "#myDiv" ).animate({top: '+=100px'}, 2000);
$( "#myDiv" ).animate({opacity: 0.25}, 200);
jQuery UI特效的使用
以下是一个简单的例子，演示了如何使用jQuery UI特效来添加淡入淡出效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effect Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#myDiv" ).hide();
$( "button" ).on( "click", function() {
$( "#myDiv" ).toggle( "fade" );
});
});
</script>
</head>
<body>
<button>Toggle</button>
<div id="myDiv" style="background-color:lightblue;width:100px;height:100px;"></div>
</body>
</html>
在这个例子中，我们在HTML页面中添加了一个DIV和一个按钮，当单击按钮时，DIV将显示淡入淡出效果。
总结
通过使用jQuery UI特效，我们可以很容易地为我们的网站添加丰富的动态效果和动画特效，从而使我们的网站更加交互式和美观。以上提到的方法只是jQuery UI特效的几种常用方法，你可以在文件中阅读所有可用的特效并学习它们的使用和实现。