jQuery UI effect() 方法

jQuery UI effect() 方法

jQuery UI框架提供了effect()方法,用于管理所选元素上不同种类的视觉效果,而无需使用show()和hide()方法。有许多类型的效果被作为参数传递给effect()方法。
语法:

$(selector).effect(effectType[, options ] [, duration ] [, complete ]);

参数: 这个方法接受上面提到的和下面描述的四个参数:

  • effectType: 为所选元素的视觉过渡选择的效果类型。
  • options: 这些选项或设置用于缓和效果。
  • duration: 动画效果运行的时间或持续时间,单位是毫秒。默认值是400ms。
  • complete: 这是一个回调函数,在视觉效果完成后执行。

jQuery UI的链接:

<link 
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

有许多不同的effectType,可以根据项目要求传递给effect()方法。在下面的例子中,我们将只演示其中的一些,以及输出图像。
示例 1: 下面的例子演示了jQuery UI effect()方法与shake效果,选项设置为timedistance

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">

    <title>jQuery UI effect method</title>

    <link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet">

    <script src=
"http://code.jquery.com/jquery-1.10.2.js">
    </script>

    <script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>

    <style>
        #divID {
            width: 200px;
            height: 150px;
            text-align: center;
            background: green;
            border: 1px solid black;
        }

        .height {
            height: 10px;
        }
    </style>

    <script>
        (document).ready(function () {('#divID').click(function () {
                ("#divID").effect("shake", {
                    times: 20,
                    distance: 180
                }, 3000, function () {("#divID").css(
                        "background", "#ff0000");
                });
            });
        });
    </script>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>

    <b>jQuery UI effect method with shake option </b>

    <div class="height"> </div>

    <div id="divID">
        <span>
            Click this to see the Shake effect!
        </span>
    </div>
</body>

</html>

输出:

jQuery UI  effect() 方法

示例 2: 下面的代码演示了jQuery UI effect()方法的explode效果,easing设置为 “swing”。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
            "width=device-width, initial-scale=1">

    <title>jQuery UI effect with explode </title>

    <link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet">

    <script src=
"http://code.jquery.com/jquery-1.10.2.js">
    </script>

    <script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>

    <style>
        #divID {
            height: 200px;
            width: 200px;
            text-align: center;
            background: green;
            border: 1px solid black;
        }

        .height {
            height: 10px;
        }
    </style>

    <script>
        (document).ready(function () {('#divID').click(function () {
                $("#divID").effect({
                    effect: "explode",
                    easing: "swing",
                    pieces: 12,
                    duration: 3000
                });
            });
        });
    </script>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>

    <b>jQuery UI effect method with explode option</b>

    <div class="height"></div>

    <div id="divID">
        <span>
            Click this to see the explode effect!
        </span>
    </div>
</body>

</html>

输出:

jQuery UI  effect() 方法

示例 3: 下面的例子演示了effect()方法与bounce效果类型。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">

    <title>jQuery UI effect Method with bounce</title>

    <link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet">

    <script src=
"http://code.jquery.com/jquery-1.10.2.js">
    </script>

    <script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>

    <style>
        #divID {
            height: 100px;
            width: 200px;
            background: green;
            text-align: center;
            border: 1px solid black;
        }

        .height {
            height: 10px;
        }
    </style>
    <script>
        (document).ready(function () {('#divID').click(function () {
                ("#divID").effect("bounce", {
                    times: 20,
                    distance: 200
                }, 3000, function () {(this).css("background", "#ff0000");
                });
            });
        });
    </script>
</head>

<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQuery UI effect method with bounce </b>
    <div class="height"> </div>
    <div id="divID">
        <span>
            Click this to see bounce effect
        </span>
    </div>
</body>
</html>

输出:

jQuery UI  effect() 方法

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程