组团学
学习方向
登录/注册

JQuery 动画

阅读 (301)

一、隐藏与显示

  • hide([speed[, callback]])

    注意括号

    作用：用于以优雅的动画隐藏所有匹配的元素

    参数 说明
    speed 用于指定动画的时长。可以是数字，也就是元素经过多少毫秒后完全隐藏。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）
    callback 用于指定隐藏完成后要触发的回调函数

  • show([speed[, callback]])

    注意括号

    作用：用于以优雅的动画显示所有匹配的元素

    参数 说明
    speed 用于指定动画的时长。可以是数字，也就是元素经过多少毫秒后完全显示。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）
    callback 用于指定隐藏完成后要触发的回调函数

  • toggle([speed[, callback]])

    注意括号

    作用：实现切换元素的可见状态，也就是如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见的

    参数 说明
    speed 用于指定动画的时长。可以是数字，也就是元素经过多少毫秒后完全显示。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）
    callback 用于指定隐藏完成后要触发的回调函数 
<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            #box{
                width: 400px;
                height: 400px;
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <button id="button1">隐藏</button>
        <button id="button2">显示</button>
        <button id="button3">切换状态</button>
        
        <script type="text/javascript">
            $(function(){
                $("#button1").bind("click", function(){
                    // $("#box").hide();
                    $("#box").hide(2000, function(){
                        console.log("隐藏动画结束");
                    });
                });
                
                $("#button2").bind("click", function(){
                    // $("#box").show();
                    $("#box").show(2000, function(){
                        console.log("显示动画结束");
                    });
                });
                
                $("#button3").bind("click", function(){
                    // $("#box").toggle();
                    $("#box").toggle(2000, function(){
                        console.log("切换状态动画结束");
                    });
                });
            });
        </script>
	</body>
</html>

二、淡入淡出效果

  • fadeIn(speed[, callback])

    作用：通过增大不透明度实现匹配元素淡入的效果

    参数 说明
    speed 用于指定动画的时长。可以是数字，也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）
    callback 回调函数

  • fadeOut(speed[, callback])

    作用：通过减小不透明度实现匹配元素淡出的效果

    参数 说明
    speed 用于指定动画的时长。可以是数字，也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）
    callback 回调函数

  • fadeTo(speed, opacity[, callback])

    作用：将匹配元素的不透明度渐进的方式调整到指定的参数

    参数 说明
    speed 用于指定动画的时长。可以是数字，也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）
    callback 回调函数 
<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            #box{
                width: 400px;
                height: 400px;
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <button id="button1">淡入</button>
        <button id="button2">淡出</button>
        <button id="button3">指定透明度</button>
        
        <script type="text/javascript">
            $(function(){
                $("#button1").bind("click", function(){
                    $("#box").fadeIn(2000, function(){
                        console.log("淡入动画结束");
                    });
                });
                
                $("#button2").bind("click", function(){
                    $("#box").fadeOut(2000, function(){
                        console.log("淡出动画结束");
                    });
                });
                
                $("#button3").bind("click", function(){
                    $("#box").fadeTo(2000, 0.15,function(){
                        console.log("切换状态动画结束");
                    });
                });
            });
        </script>
	</body>
</html>

三、滑动效果

  • slideDown(speed[, callback])

    作用：逐渐向下增加匹配的隐藏元素的高度，直到元素完全显示为止

    参数 说明
    speed 用于指定动画的时长。可以是数字，也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）
    callback 回调函数

  • slideUp(speed[, callback])

    作用：逐渐向上减少匹配的显示元素的高度，直到元素完全隐藏为止

    参数 说明
    speed 用于指定动画的时长。可以是数字，也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）
    callback 回调函数

  • slideToggle(speed[, callback])

    作用：通过高度的变化动态切换元素的可见性。在使用slideToggle()方法时，如果元素是可见的，就通过减小高度使全部元素隐藏，如果元素是隐藏的，就增加元素的高度使元素最终全部可见

    参数 说明
    speed 用于指定动画的时长。可以是数字，也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）
    callback 回调函数 
<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            #box{
                width: 400px;
                height: 400px;
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <button id="button1">滑动显示</button>
        <button id="button2">滑动隐藏</button>
        <button id="button3">切换状态</button>
        
        <script type="text/javascript">
            $(function(){
                $("#button1").bind("click", function(){
                    $("#box").slideDown(2000, function(){
                        console.log("滑动显示动画结束");
                    });
                });
                
                $("#button2").bind("click", function(){
                    $("#box").slideUp(2000, function(){
                        console.log("滑动隐藏动画结束");
                    });
                });
                
                $("#button3").bind("click", function(){
                    $("#box").slideToggle(2000, function(){
                        console.log("切换状态动画结束");
                    });
                });
            });
        </script>
	</body>
</html>

四、自定义动画效果

  • 创建动画

    原型：animate(params[, speed][, callback])

    参数 说明
    params 表示一个包含属性和值的映射，可以同时包含多个属性
    例如 {left:“200px”,top:“100px”}
    speed 表示动画运行的速度，参数规则同其他动画效果的speed一致，它是一个可选参数
    callback 表示一个回调函数，当动画效果运行完毕后执行该回调函数，它也是一个可选参数

    注意事项：

    1. 在使用animate()方法时，必须设置元素的定位属性position为relative或absolute，元素才能动起来。如果没有明确定义元素的定位属性，并试图使用animate()方法移动元素时，它们只会静止不动
    2. 在animate()方法中可以使用属性opacity来设置元素的透明度
    3. 如果在{left:“400px”}中的400px之前加上“+=”就表示在当前位置累加，“-=”就表示在当前位置累减

  • 停止动画

    原型：stop([stopAll[, gotoEnd]])

    参数 说明
    stopAll 可选参数。表示是否清空尚未执行完的动画队列（值为true时表示清空动画队列）
    gotoEnd 可选参数。表示是否让正在执行的动画直接到达动画结束时的状态（值为true时表示直接到达动画结束时状态），该参数只能在设置了 stopAll 参数时使用

  • 延迟动画的执行

    delay(时间)

  • 判断元素是否处于动画状态

    is(":animated")返回true说明正在执行动画

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left:20px;
                top: 50px
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <button id="button1">停止动画</button>
        <button id="button2">判断元素是否在执行动画</button>
        
        <script type="text/javascript">
            $(function(){
                $("#box").animate({left:"300px"}, 1000).delay(2000).animate({top:"400px", opacity:"0.5"}, 2000).animate({left:"-=100px"}, 3000);
                
                $("#button1").click(function(){
                	$("#box").stop(true, false);
                });
                
                //判断元素是否处于动画状态
                $("#button2").click(function(){
                	if ($("#box").is(":animated")) {
                		console.log("动画正在执行");
                	}
                });
            });
        </script>
	</body>
</html>
需要 登录 才可以提问哦
头像
：
回复