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(0.6秒),normal(0.4秒),fast(0.2秒).也得以是象征时间的整数(阿秒)。callback是可选的回调函数。在动画完结未来执行

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

事例和首个例子一样,只是对hide()和show()扩展了岁月参数。其实toogle()也能够参与事件参数。

万一间接调用toogle()
也能够完毕展现和隐形

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

 

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

对此动画效果显隐,jQuery还提供了fadeIn()个fadeOut()那四个实用的措施,他们的卡通效果类似褪色,语法与show()和hide()完全相同。

2018正版葡京赌侠诗,            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 参数,不然不能够安装该参数。

4.幻灯片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">

5.自定义动画

考虑到框架的通用性及代码文件的高低,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与第1种方式完全等同,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块同时使用了四个卡通效果,个中第2个div快的率先个卡通添加了queue:false参数,使得前两项四个卡通同时实施。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图