码迷,mamicode.com
首页 > Web开发 > 详细

jQuery动画特效

时间:2016-05-12 12:39:37      阅读:212      评论:0      收藏: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>


jQuery动画特效

标签:

原文地址:http://blog.csdn.net/u013045370/article/details/51366096

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!