JQuery中的三种显示隐藏方法

最新推荐文章于 2024-06-11 08:19:34 发布

动心。

最新推荐文章于 2024-06-11 08:19:34 发布

阅读量1.5k

点赞数

分类专栏：个人笔记

本文链接：https://blog.csdn.net/qq_43494108/article/details/99706981

版权

个人同时被 2 个专栏收录

5 篇文章 2 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

JQuery中的三种显示隐藏方法

jquery中三种显示方式有：show() slideDowm() 和fadeIn() 。它们都有对应的三种隐藏方法hide() slideUp() 以及fadeOut();它们都有两个参数：一个是speed 另一个是callback；（也可以不给参数）
speed（时间）:有三种值：slow(慢)、fat(快)、毫秒：2000
callback(回调函数)：就是当这个盒子显示或者隐藏之后所执行的函数；

接下来我们先画个盒子，通过hover事件来展示下这三种显示和隐藏方法
这里所用的jquery是1.12.4版本的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    div{
        width: 400px;
        height: 400px;
        border: solid 1px rgb(204,204,204);
        background-color: pink;//弄个骚粉
    }
</style>

<body>
    <div></div>
</body>
</html>

在这里插入图片描述
然后我们先用show()和hide()

$(function(){
    $("div").hover(function(){
        stop();
        $(this).hide("slow");
    },function(){
        stop();
        $(this).show("slow");
    });
});

在这里插入图片描述

可以看到盒子在变小的时候透明度也变了，而且它的宽高也在变化，显示的时候就是宽高越来越大

然后接着我们来看slideDown()和slideUp();

$(function(){
    $("div").hover(function(){
        $(this).slideUp("slow");
    },function(){
        $(this).slideDown("slow");
    });
});

在这里插入图片描述
用**slidedown()和slideUp()**来显示和隐藏的时候这个盒子只有高在变小和变大，而且不会改变透明度

接下来我们用**fadeIn()和fadeOut()**来显示隐藏

$(function(){
    $("div").hover(function(){
        $(this).fadeOut("slow");
    },function(){
        $(this).fadeIn("slow");
    });
});

在这里插入图片描述
用fadeIn()*和fadeOut()**来显示和隐藏的时候这个盒子只有透明度在改变其他的都不会变；就相当于淡入淡出

总结：在不同的场合的时候用用除show()和hide()来显示和隐藏内容会给别人一种不一样的感觉；

动心。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery中的三种显示隐藏方法

JQuery中的三种显示隐藏方法jquery中三种显示方式有：show() slideDowm() 和fadeIn() 。它们都有对应的三种隐藏方法hide() slideUp() 以及fadeOut();它们都有两个参数：一个是speed 另一个是callback；（也可以不给参数）speed（时间）:有三种值：slow(慢)、fat(快)、毫秒：2000callback(回调函数)：就...
复制链接

扫一扫