jQuery动画与特效详细明白_jquery_脚本之家

本节简单介绍jQuery的显示和隐藏,本节简单介绍jQuery的显示和隐藏,上个例子对show()和hide()方法做了简单介绍,简单介绍jQuery的显示和隐藏,1.显示和隐藏hide()和show(),本节简单介绍jQuery的显示和隐藏

1.浮现和掩盖hide

1.展现和遮盖hide(卡塔尔(قطر‎和show(卡塔尔(قطر‎

jQuery掌握之(大器晚成)动漫与特效,jquery精通

本节根本降级和上学jQuery的自行显隐,渐入渐出、飞入飞出。自定义动漫等。
1.显得和掩盖hide(卡塔尔国和show(卡塔尔(قطر‎
对于动漫来讲,展现和蒙蔽是最核心的意义之生龙活虎,本节简要介绍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>
        <div><em>本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。</em>
        </div>

上述是对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(State of Qatar和show(State of Qatar增添了时间参数。其实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="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(State of Qatar方法的二种格局及利用。

animate(卡塔尔国方法给开辟者比十分大的空间。它一起有三种形式。第风流浪漫种格局相比较常用。用法如下

animate(params,[duration],[easing],[callback])

个中params为希望进行变幻的css属性列表,以至希望变化到的最终值,duration为可选择,与show(State of Qatar/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(State of Qatar第三种样式。

本节首要降级和上学jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。
1.显得和隐敝hide(…

对此动漫来讲,显示和蒙蔽是最基本的法力之后生可畏,本节简要介绍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>
        <div><em>本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。</em>
        </div>

本节第风华正茂降级和学习jQuery的活动显隐,渐入渐出、飞入飞出。自定义动漫等。
1.展现和隐瞒hide
对于动漫来讲,突显和藏身是最中央的机能之生龙活虎,本节简介jQuery的显示和隐身。

 以上是对hide(卡塔尔(قطر‎和show(卡塔尔函数的测验。

以上是对hide函数的测量检验。

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

2.使用show方法

上个例子对show(State of Qatar和hide(卡塔尔方法做了简单介绍,其实那五个议程能够肩负参数调整显遮掩进程。
语法如下

上个例子对show方法做了简易介绍,其实那多个点子可以采取参数调控显掩没进度。语法如下

show(duration,[callback]);
hide(duration,[callback]);

show;hide;在那之中,duration表示动漫实施时间的尺寸,能够象征速度的字符串,包罗slow,normal,fast.也足以是意味时间的整数。callback是可选的回调函数。在动漫达成之后实践。

个中,duration表示动漫奉行时间的尺寸,能够象征速度的字符串,包含slow(0.6秒卡塔尔国,normal(0.4秒State of Qatar,fast(0.2秒State of Qatar.也可以是表示时间的整数(纳秒State of Qatar。callback是可选的回调函数。在动漫落成现在实践

复制代码 代码如下:

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

事例和率先个例子雷同,只是对hide扩大了岁月参数。其实toogle(卡塔尔(قطر‎也足以参预事件参数。

事例和率先个例子相仿,只是对hide(State of Qatar和show(卡塔尔扩充了光阴参数。其实toogle(卡塔尔国也足以步入事件参数。

2.使用fadeIn方式

假如直白调用toogle(卡塔尔国也能够达成突显和潜伏

对于动漫效果显隐,jQuery还提供了fadeIn(卡塔尔国个fadeOut那多个实用的措施,他们的动漫片效果相似褪色,语法与slow完全相通。

 $(function () {
            $("#mybtn").toggle(function () {
                $(".hidden").toggle();//获取到隐藏的将其显示
                $(this).attr("src", "image/up.jpg");
            }, function () {
                $(".hidden").toggle();//获取到显示的将其隐藏
                $(this).attr("src", "image/down.jpg");
            });
        });

fadeIn; fadeOut;例子

 

复制代码 代码如下:

3.使用fadeIn()和fadeOut()方式

图片 1

对此动漫效果显隐,jQuery还提供了fadeIn(State of Qatar个fadeOut(State of Qatar这五个实用的秘技,他们的卡通效果近似褪色,语法与show(卡塔尔国和hide(卡塔尔国完全雷同。

fadeOut相关参数

            fadeIn(duration,
[callback]);
            fadeOut(duration,
[callback]);
例子