首页 > 其他分享> > jQuery显示隐藏效果

jQuery显示隐藏效果

2022-04-18 10:00:16 作者：互联网

显示语法规范

显示参数

1.参数都可以省略，无动画直接显示。

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

3.easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”.

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

代码示例（包含隐藏）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            height: 400px;
            width: 138px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>
<script src="/js文件/jQuery.mini.js"></script>
<script type="text/javascript">
    $(function () {
        //显示
        $("button").eq(0).click(function () {
            $("div").show(1000, function () {
                alert(1)
            });
        })
        //隐藏
        $("button").eq(1).click(function () {
            $("div").hide(1000, function () {
                alert(1)
            });
        })
        //切换
        $("button").eq(1).click(function () {
            $("div").toggle(1000)
        })
        //一般情况下我们都不加参数直接显示隐藏就可以了
    })
</script>

</html>

标签：jQuery,function,效果,click,div,eq,隐藏,1000
来源： https://www.cnblogs.com/lxr0606/p/16158374.html