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

jQuery动画

程序员文章站 2022-07-05 15:34:07
jQuery动画 1.hide([speed,[easing],[fn]]) 方法:隐藏显示的元素 参数： ①speed[,fn] speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) fn:在动画完成时执行的函数，每个 ......

jquery动画

1.hide([speed,[easing],[fn]])

方法:隐藏显示的元素

 参数：

　　①speed[,fn]

　　speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

　　fn:在动画完成时执行的函数，每个元素执行一次。

　　②[speed],[easing],[fn]

　　speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

　　easing:(optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

　　fn:在动画完成时执行的函数，每个元素执行一次。

2.show([speed,[easing],[fn]])

方法：显示隐藏的匹配元素。

参数：

　　①speed[,fn]

　　speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

　　fn:在动画完成时执行的函数，每个元素执行一次。

　　②[speed],[easing],[fn]

　　speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

　　easing:(optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

　　fn:在动画完成时执行的函数，每个元素执行一次。

 

注意：参数可以是一个number类型,也可以是字符串类型

 

案例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        div{
            width: 400px;
        }
        img{
            width:90px ;
            height:90px;
            vertical-align: top;
        }

    </style>
    <script src="jquery-1.12.2.js"></script>

    <script>
//        $(function () {
//            $("#btn1").click(function () {
//                //回调函数
//                $("div>img").hide(1000,function () {
//                    alert("结束了");
//                });
//            });
//
//            $("#btn2").click(function () {
//                //回调函数
//                $("div>img").show(1000,function () {
//                    alert("结束了====");
//                });
//            });
//        });
    </script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                //获取div,最后一个图片,隐藏
                $("div>img").last("img").hide(800,function () {
                    //arguments.callee相当于递归
                    $(this).prev().hide(800,arguments.callee);
                });
            });
            //显示
            $("#btn2").click(function () {
                $("div>img").first("img").show(800,function () {
                    //arguments.callee相当于递归
                    $(this).next().show(800,arguments.callee);
                });
            });
        });
    </script>
</head>
<body>
<input type="button" value="隐藏动画" id="btn1"/>
<input type="button" value="显示动画" id="btn2"/>
<div>
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
</div>
</body>
</html>

 

 

动画方法:animate方法

　　第一个参数:键值对,(数值的属性可以改,颜色不能改)
　　第二个参数:动画的时间
　　第三个参数:回调函数

例如：

$("#im").animate({"left":"10px","top":"500px","width": "50px", "height": "50px"},2000,function () {
　　$("#im").animate({"left":"+=505px","top":"-=400px","width":"+=200px","height":"+=200px"},1000);
});

 

停止动画效果:stop()方法

例如：

$(".wrap>ul>li").mouseover(function () {
　　$(this).children("ul").stop().show(500);// 显示 ul
　　});
　　$(".wrap>ul>li").mouseout(function () {
　　　　$(this).children("ul").stop().hide(500);// 显示 ul
});

 

其他动画方法

1.$("div").slideup(1000);// 滑入
2.$("div").slidedown(1000);// 滑出
3.$("div").slidetoggle(1000);// 切换滑入滑出
4.$("div").fadein(1000);// 淡入
5.$("div").fadeout(1000);// 淡出
6.$("div").fadetoggle(1000);// 切换淡入淡出

7.

// 可以设置透明度,参数 1: 时间 , 参数 2: 到达透明度
$( “div ”).fadeto(1000,0.3);// 一个参数,常用
// 参数 1: 没有时间 , 参数 2: 到达透明度
// 和 css("opacity",0.1);
$("div").fadeto(0,0.1);// 一个参数

 

 

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢

上一篇： Nodejs的模块系统

下一篇： 微信朋友圈广告不能关闭被点名 官方回应：强化广告审核

推荐阅读