夜光带你走进Jquery UI（三）擅长的领域

最新推荐文章于 2019-12-03 19:45:09 发布

GeniusTeam-夜光

最新推荐文章于 2019-12-03 19:45:09 发布

阅读量128

点赞数

分类专栏： Genius-Jquery UI

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102697422

版权

Genius-Jquery UI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

夜光序言：

静享一个人的清欢，守住内心的风景，聆听岁月的脚步渐行渐远，惟愿，这一季的明媚，能许我浅笑而安。

正文：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>夜光：颜色动画（Color Animation）演示</title>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <style>
        #elem {
            color: #c71bff;
            background-color: #ff79a9;
            font-size: 25px;
            padding: 1em;
            text-align: center;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<div id="elem">颜色动画</div>
<button id="toggle">改变颜色</button>

<script>
    $( "#toggle" ).click(function() {
        $( "#elem" ).animate({
            color: "green",
            backgroundColor: "rgb( 20, 20, 20 )"
        });
    });
</script>

</body>
</html>

降落特效（Drop Effect）通过单个方向滑动的淡入淡出来隐藏或显示一个元素。

<pre style="white-space: pre-wrap;">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>夜光：降落特效（Drop Effect）演示</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <style>
  #toggle {
      width: 100px;
      height: 100px;
      background: #ccc;
  }
  </style>
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<p>点击任意地方进行切换。</p>
<div id="toggle"></div>

<script>
$( document ).click(function() {
    $( "#toggle" ).toggle( "drop" );
});
</script>

</body>
</html>

Easing 函数指定动画在不同点上的行进速度。

对一个元素应用动画特效。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>夜光：.effect() 演示</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <style>
        div {
            width: 100px;
            height: 100px;
            background: #ccc;
            border: 1px solid #000;
        }
    </style>
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<p>点击任意地方应用特效。</p>
<div></div>

<script>
    $( document ).click(function() {
        $( "div" ).effect( "bounce", "slow" );
    });
</script>

</body>
</html>

爆炸特效（Explode Effect）通过把元素裂成碎片来隐藏或显示一个元素。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>夜光：爆炸特效（Explode Effect）演示</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <style>
        #toggle {
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<p>点击任意地方进行切换。</p>
<div id="toggle"></div>

<script>
    $( document ).click(function() {
        $( "#toggle" ).toggle( "explode" );
    });
</script>

</body>
</html>

淡入淡出特效（Fade Effect）通过淡入淡出元素来隐藏或显示一个元素。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>夜光：淡入淡出特效（Fade Effect）演示</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <style>
        #toggle {
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<p>点击任意地方进行切换。</p>
<div id="toggle"></div>

<script>
    $( document ).click(function() {
        $( "#toggle" ).toggle( "fade" );
    });
</script>

</body>
</html>

折叠特效（Fold Effect）通过折叠元素来隐藏或显示一个元素。

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进Jquery UI（三）擅长的领域

夜光序言：静享一个人的清欢，守住内心的风景，聆听岁月的脚步渐行渐远，惟愿，这一季的明媚，能许我浅笑而安。正文：<!doctype html><html lang="en"><head> <meta charset="utf-8"> <ti...
复制链接

扫一扫

专栏目录