jQuery动画

来源：cnblogs　　作者：bignewbie　　时间：2019/3/25 9:15:20　　对本文有异议

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);// 切换淡入淡出

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

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

原文链接：http://www.cnblogs.com/CGWTQ/p/10583729.html

友情链接：直通硅谷　点职佳　北美留学生论坛

①speed[,fn]

①speed[,fn]

jQuery热门文章

jQuery推荐文章