博客

jQuery UI effect() 方法

  • Post category:jquery

jQuery UI effect() 方法是 jQuery UI 库中一个非常常用的效果方法，可以将网页中的元素添加各种动态效果特效，比如淡入、淡出、滑动等。这个方法可以使用在任何 jQuery 对象上。

语法

$(selector).effect(effectName, options, duration, callback);

参数说明：

  • effectName：必需。前缀 “ui-” 可以省略。
  • options：可选。不同的效果可以有不同的选项。
  • duration：可选。动画持续时间（单位毫秒）。默认为 “normal”。
  • callback：可选。动画结束后的回调函数。

示例 1：淡出效果

以下代码演示了如何使用 jQuery UI 的 effect() 方法将一个 div 元素设置为淡出效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI效果示例</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>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").effect("fade");
    });
});
</script>
</head>
<body>
<button>点击淡出</button>
<div id="div1" style="background-color:#ccffcc;height:80px;width:200px;box-shadow:2px 2px 2px grey;text-align:center;padding-top:30px;">Hello World</div>
</body>
</html>

在这个代码段中，我们使用了 effect() 方法将 div 元素设置为淡出效果。当页面加载完毕后，会显示一个按钮，当点击按钮时，页面中名为 “div1” 的元素就会以淡出的效果消失。

示例 2：抖动效果

以下代码演示了如何使用 jQuery UI 的 effect() 方法将一个 div 元素设置为抖动效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI效果示例</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>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").effect("shake", {times:3}, 300);
    });
});
</script>
</head>
<body>
<button>点击抖动</button>
<div id="div1" style="background-color:#ccffcc;height:80px;width:200px;box-shadow:2px 2px 2px grey;text-align:center;padding-top:30px;">Hello World</div>
</body>
</html>

在这个代码段中，我们使用了 effect() 方法将 div 元素设置为抖动效果。当页面加载完毕后，会显示一个按钮，当点击按钮时，页面中名为 “div1” 的元素就会不断地抖动，每次抖动的持续时间为 300 毫秒，共抖动 3 次。

以上就是使用 jQuery UI effect() 方法的完整攻略。

Tags: