jQuery动画特效

最新推荐文章于 2022-04-17 07:00:00 发布

都说没想好

最新推荐文章于 2022-04-17 07:00:00 发布

阅读量3.4k

点赞数

分类专栏： web前端（慕课网教程操作+笔记）文章标签： jquery web 前端动画开发

本文链接：https://blog.csdn.net/u013045370/article/details/51366096

版权

web前端（慕课网教程操作+笔记）专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.调用show()和hide()方法显示和隐藏元素,toggle切换，之前已经有博文细讲了。

$(selector).hide(speed,[callback]);
$(selector).show(speed,[callback]);
//参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

2.slideUp()和slideDown()方法的滑动效果

比如配合click使用，通过up和down改变元素高度，从何实现其隐藏和显示的效果

$(selector).slideUp(speed,[callback]);
$(selector).slideDown(speed,[callback]);
//其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。

slideDown()仅适用于被隐藏的元素；slideup()则相反。

 <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () { //绑定click事件
                    if ($("#hidval").val() == 0) {   //value初始值为0的表示hidden状态
                        $("ul").slideDown(3000,function() {  //那么都用slideDown，以3000ms的速度向下显示
                            $("#hidval").val(1);      //并把value改为1
                        })
                    } else {
                         $("ul").slideUp(3000,function(){    //相反
                            $("#hidval").val(0); 
                        })
                    }
                })
            });
        </script>

同样，slideToggle实现滑动切换的效果。

3.fadeIn（），fadeOut（），实现淡入淡出，通过改变其透明度。

格式如上，参数为时间和回调

fadeTo()方法设置淡入淡出效果的不透明度：

$(selector).fadeTo(speed,opacity,[callback]);
//其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。

4.animate()方法自定义动画效果

//$(selector).animate({params},speed,[callback])
//params参数为制作动画效果的CSS属性名与值，要加上大括号;
 <script type="text/javascript">
            $(function () {
                $("div").animate({
                    width: "20px",
                    height: "20px"
                },
                3000, function () {
                    $("div").html("执行完成!");
                });
            });
        </script>
//这个实现了改变div的长宽并执行完成后显示执行完成

除了改变长宽，还可以移动元素位置，但是移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”。

<script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "20px"
                }, 3000, function () {
                    $("span").animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("div").html("执行完成!");
                    });
                });
            });
        </script>

该图形<span></span>已经在css设置了长宽，颜色，position

再调用animate方法，其效果是：先向右移动，left变为20px,耗时3000ms，完成后执行长宽各加30px,耗时3000ms，最后显示执行完成。

这里是几层的回调函数，就会分布进行，如果要通知进行，就把自定义的动画全部放入param中即可。

5.调用stop()方法停止当前所有动画效果

$(selector).stop([clearQueue],[goToEnd])
//其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者true表示停止正在执行的动画，后者为true表示完成正在执行的动画即直接显示最后效果，默认为false。

6.delay（）延时执行动画效果

$(selector).delay(duration)

其中参数duration为延时值。指的是，下一个动画的延时执行，执行中的动画并不会停止。

下面例子表示，执行动画过程中，点击按钮后，下一个动画（动画队列中）推迟2000ms后再执行动画。

还有一点是，重复点击时，时间会累加：

<body>
        <h3>调用delay()方法延时执行动画效果</h3>
        
        <span></span>
        <input id="btnStop" type="button" value="延时" />
        <div id="tip"></div>
        
        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=60px',
                        width: '+=60px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                    $("span").delay(2000);
                    $("#tip").html("正在延时!");
                    
                });
            });
        </script>
    </body>