jQuery实现动画效果

jQuery有三种方式显示与隐藏元素

1、默认显示和隐藏的方式

1、show([speed],[easing],[fn])：显示

2、hide([speed],[easing],[fn])：隐藏

3、toggle([speed],[easing],[fn])：切换

2、滑动显示和隐藏

1、slideDown([speed],[easing],[fn])：向下滑动显示

2、slideUp([speed,[easing],[fn]])：向上滑动隐藏

3、slideToggle([speed],[easing],[fn])：切换

3、淡入淡出显示和隐藏

1、fadeIn([speed,[easing],[fn]])：显示

2、fadeOut([speed,[easing],[fn]])：隐藏

3、fadeToggle([speed,[easing],[fn]])：切换

[speed],[easing],[fn]

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

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

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

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>

    <script>
        function hideFn() {
            $("#showDiv").fadeOut(2000,"swing",function () {
                alert("我完全隐藏了")
            })
        }

        function showFn() {
            $("#showDiv").show("slow","swing",function () {
                alert("我显示出来了")
            })
        }

        function toggleFn() {
            $("#showDiv").toggle()
        }

    </script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>

jQuery实现动画效果

猜你喜欢