欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript开发中jQuery动画与特效详解

程序员文章站 2022-06-13 19:30:18
javascript开发中jquery动画与特效详解,对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jquery的显示和隐藏。 代码如下:

javascript开发中jquery动画与特效详解,对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jquery的显示和隐藏。

代码如下:


<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(); //显示
                });
            });
        </script>
        <input type="button" value="hide">
        <input type="button" value="show">
        <p>点击按钮,看看效果</p>
        <p><em>本节主要降级和学习jquery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jquery的显示和隐藏。</em>
        </p>

 

以上是对hide()和show()函数的测试。

2.使用show()、hide()和toggle()方法

上个例子对show()和hide()方法做了简单介绍,其实这两个方法可以接受参数控制显隐藏过程。
语法如下

show(duration,[callback]);
hide(duration,[callback]);
其中,duration表示动画执行时间的长短,可以表示速度的字符串,包括slow,normal,fast.也可以是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成之后执行。

 

代码如下:


<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(300); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(500); //显示
                });
            });
        </script>

 

例子和第一个例子相同,只是对hide()和show()增加了时间参数。其实toogle()也可以加入事件参数。

2.使用fadein()和fadeout()方式

对于动画效果显隐,jquery还提供了fadein()个fadeout这两个实用的方法,他们的动画效果类似褪色,语法与slow()和hide()完全相同。

            fadein(duration, [callback]);
            fadeout(duration, [callback]);
例子

 

代码如下:


<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeout(3000); //逐渐fadeout
                });
                $("input:eq(1)").click(function() {
                    $("img").fadein(1000); //逐渐fadein
                });
            });

 

        </script>

        <img src=https://www.2cto.com/uploadfile/2018/0104/20180104111209955.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() {
                    $("p").add("img").slideup(1000);
                });
                $("input:eq(1)").click(function() {
                    $("p").add("img").slidedown(1000);
                });
                $("input:eq(2)").click(function() {
                    $("p").add("img").hide(1000);
                });
                $("input:eq(3)").click(function() {
                    $("p").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>
    <p></p><img src="04.jpg">

 

前面提到了几种动画效果,jquery还提供了slideup()和slidedown()来模拟ppt中的类似幻灯片拉帘效果,它与slow()和hide()完全相同。

以上代码定义了一个p和一个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>
            p {
                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>
        <p id="block">动画!</p>

 

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

 

代码如下:


<style>
            p {
                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>
        <p id="block">动画!</p>

 

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

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

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

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

 

代码如下:


    <style>
            p {
                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() {
                    //恢复默认设置
                    $("p").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="重置">
        <p id="block1">block1</p>
        <p id="block2">block2</p>

 

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