jQuery:元素的隐藏和显示

1 改变元素的宽和高(带动画效果)

  show( speed ):显示

  hide( speed ):隐藏

  toggle( speed )等价于show+hide : 显示的隐藏,隐藏的显示

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>

<body>

    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn2").click(function(){
            //fast:快速的
            //slow:缓慢的
            //毫秒:自定义
            $("div").hide(2000);
        });

        $("#btn1").click(function(){
            $("div").show(slow);
        });

        $("#btn3").click(function(){
            $("div").toggle(1000);
        });
    </script>
</body>

 

 

2 改变元素的高(拉伸效果)

  slideDown( speed ) :显示

  slideUp( speed ):隐藏

  slideToggle( speed )等价于slideDown+slideUp

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒

<script>
    $("#btn2").click(function(){
        $("div").slideUp(1000); //向上收缩
    });

    $("#btn1").click(function(){
        $("div").slideDown(1000); //向下伸展
    });

    $("#btn3").click(function(){
        $("div").slideToggle(1000); //切换
    });
</script>

 

3 不改变元素的大小(淡入淡出效果)

  fadeIn( speed ) 显示

  fadeOut( speed ) 隐藏

  fadeToggle( speed ) 等价于fadeIn+fadeOut动画

  fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒

<script>
    $("#btn2").click(function(){
        $("div").fadeOut(1000); // 隐藏:淡出我的视线
    });

    $("#btn1").click(function(){
        $("div").fadeIn(1000); // 显示:映入眼帘
    });

    $("#btn3").click(function(){
        $("div").fadeToggle(1000); // 切换
    });

    $("#btn4").click(function(){
       $("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
    });
</script>

 

4 链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法,可以把动作/方法链接在一起 ;

例如:点击一次按钮,让div完成4个指定动作

  1. 背景变粉

  2. 字体变绿

  3. 收缩

  4. 拉伸

<style>
div{
    width: 200px;
    height: 200px;
    background-color: black;
    color:white;
    font-size: 3em;
}
</style>
<body>
    <button>试试</button>
    <div>hello</div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){              
$("div").css("backgroundcolor","pink").css("color","green").slideUp(1000).slideDown(1000);
});
  </script>
</body>

 

jQuery:元素的隐藏和显示

上一篇:Thinkphp6 管理后台搭建 - LayuiAdmin Pro


下一篇:idea不支持jsp中pageContext等