jQuery动画与特效详解

前端技术 2023/09/09 JavaScript

1.显示和隐藏hide()和show()

对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。

http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg\">
        <input type=\"button\" value=\"Hide\">
        <input type=\"button\" value=\"Show\">

fadeTo()方法的使用。

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

例子：

复制代码 代码如下:

<script type=\"text/javascript\">
            $(function() {
                $(\"input:eq(0)\").click(function() {
                    $(\"img\").fadeOut(1000);
                });
                $(\"input:eq(1)\").click(function() {
                    $(\"img\").fadeIn(1000);
                });
                $(\"input:eq(2)\").click(function() {
                    $(\"img\").fadeTo(1000, 0.5);
                });
                $(\"input:eq(3)\").click(function() {
                    $(\"img\").fadeTo(1000, 0);
                });
            });
        </script>
            <p><img src=\"03.jpg\"></p>
<input type=\"button\" value=\"FadeOut\">
<input type=\"button\" value=\"FadeIn\">
<input type=\"button\" value=\"FadeTo 0.5\">
<input type=\"button\" value=\"FadeTo 0\">

fadeOut相关参数

speed 
可选。规定元素从当前透明度到指定透明度的速度。

可能的值：

毫秒 （比如 1500）
\"slow\"
\"normal\"
\"fast\"
opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback 
可选。fadeTo 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

3.幻灯片slideUp和slideDown效果

复制代码 代码如下:

<script type=\"text/javascript\">
            $(function() {
                $(\"input:eq(0)\").click(function() {
                    $(\"div\").add(\"img\").slideUp(1000);
                });
                $(\"input:eq(1)\").click(function() {
                    $(\"div\").add(\"img\").slideDown(1000);
                });
                $(\"input:eq(2)\").click(function() {
                    $(\"div\").add(\"img\").hide(1000);
                });
                $(\"input:eq(3)\").click(function() {
                    $(\"div\").add(\"img\").show(1000);
                });
            });
        </script> 
    <input type=\"button\" value=\"SlideUp\">
    <input type=\"button\" value=\"SlideDown\">
    <input type=\"button\" value=\"Hide\">
    <input type=\"button\" value=\"Show\"><br>
    <div></div><img src=\"04.jpg\">

前面提到了几种动画效果，jQuery还提供了slideUp()和slideDown()来模拟PPT中的类似幻灯片拉帘效果，它与slow()和hide()完全相同。

以上代码定义了一个div和一个img,用add方法组合在一起。

4.自定义动画

考虑到框架的通用性及代码文件的大小，jQuery不能涵盖所有的动画效果，但它提供了animate()方法，能够使开发者自定义动画。本节主要通过介绍animate()方法的两种形式及应用。

animate()方法给开发者很大的空间。它一共有两种形式。第一种形式比较常用。用法如下

animate(params,[duration],[easing],[callback])
其中params为希望进行变幻的css属性列表，以及希望变化到的最终值，duration为可选项，与show()/hide()的参数含义完全相同。easing为可选参数，通常供动画插件使用。 用来控制节奏的变化过程。jQuery中只提供了linear和swing两个值.callback为可选的回调函数。在动画完成后触发。

 需要注意。params中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.另外，params只能是css中用数值表示的属性。例如width.top.opacity等

像backgroundColor这样的属性不被animate支持。

复制代码 代码如下:

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
            }
        </style>
        <script type=\"text/javascript\">
            $(function() {
                $(\"button\").click(function() {
                    $(\"#block\").animate({
                        opacity: \"0.5\",
                        width: \"80%\",
                        height: \"100px\",
                        borderWidth: \"5px\",
                        fontSize: \"30px\",
                        marginTop: \"40px\",
                        marginLeft: \"20px\"
                    }, 2000);
                });
            });
        </script>
        <button id=\"go\">Go>></button>
        <div id=\"block\">动画！</div>

在params中，jQuery还可以用“+=”或者\"-=\"来表示相对变化。如

复制代码 代码如下:

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
                position: absolute;
            }
        </style>
        <script type=\"text/javascript\">
            $(function() {
                $(\"button:first\").click(function() {
                    $(\"#block\").animate({
                        left: \"-=80px\" //相对左移
                    }, 300);
                });
                $(\"button:last\").click(function() {
                    $(\"#block\").animate({
                        left: \"+=80px\" //相对右移
                    }, 300);
                });
            });
        </script>
        <button >Go>></button>
        <button >Go>></button>
        <div id=\"block\">动画！</div>

先将div进行绝对定位，然后使用animate()中的-=和+=分别实现相对左移和相对右移。

animate()方法还有另外一种形式，如下所示：

animate(params,options)
其中，params与第一种形式完全相同，options为动画可选参数列表，主要包括duration,esaing，callback,queue等，其中duration.easing.callback与第一种形式完全一样，queue为布尔值，表示当有多个 animate()组成jQuery时，当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false

如下例子，展示了animate()第二种用法。

复制代码 代码如下:

    <style>
            div {
                background-color: #FFFF22;
                width: 100px;
                text-align: center;
                border: 2px solid #000000;
                margin: 3px;
                font-size: 13px;
                font-family: Arial, Helvetica, sans-serif;
            }
            input {
                border: 1px solid #000033;
            }
        </style>
        <script type=\"text/javascript\">
            $(function() {
                $(\"input:eq(0)\").click(function() {
                    //第一个animate与第二个animate同时执行，然后再执行第三个
                    $(\"#block1\").animate({
                            width: \"90%\"
                        }, {
                            queue: false,
                            duration: 1500
                        })
                        .animate({
                            fontSize: \"24px\"
                        }, 1000)
                        .animate({
                            borderRightWidth: \"20px\"
                        }, 1000);
                });
                $(\"input:eq(1)\").click(function() {
                    //依次执行三个animate
                    $(\"#block2\").animate({
                            width: \"90%\"
                        }, 1500)
                        .animate({
                            fontSize: \"24px\"
                        }, 1000)
                        .animate({
                            borderRightWidth: \"20px\"
                        }, 1000);
                });
                $(\"input:eq(2)\").click(function() {
                    $(\"input:eq(0)\").click();
                    $(\"input:eq(1)\").click();
                });
                $(\"input:eq(3)\").click(function() {
                    //恢复默认设置
                    $(\"div\").css({
                        width: \"\",
                        fontSize: \"\",
                        borderWidth: \"\"
                    });
                });
            });
        </script>
        <input type=\"button\" id=\"go1\" value=\"Block1动画\">
        <input type=\"button\" id=\"go2\" value=\"Block2动画\">
        <input type=\"button\" id=\"go3\" value=\"同时动画\">
        <input type=\"button\" id=\"go4\" value=\"重置\">
        <div id=\"block1\">Block1</div>
        <div id=\"block2\">Block2</div>

以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行。可以通过重置反复测试，熟悉animate()第二种形式。

以上就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/24333

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案