jQuery的元素隐藏和显示

在页面中会又许多的出入事件，经典的像淡入淡出等动画效果，用一个属性就可以轻易的去做到了。

隐藏和显示

在jQuery中提供了显示隐藏方法给开发者快捷的操作，通过hide()和show()方法即可完成相应的操作。

实例：

我们先来一个文本和按钮

    

        
        
测试文本数据
        点击隐藏
        点击隐藏
    

然后我们来设置事件的效果

//获取view
$(".btn").click(function () {
    $("p").hide();
});
$(".btn").dblclick(function () {
    $("p").show();
});

这样就完成了基本的显示隐藏属性了。

那么我们分析一下jQuery给我们封装的轮子中具体有什么。

源码：

TIM图片20190129124408.png

从上面可以看得到，在方法中还能添加三个属性分别是：speed, easing, callback，翻译成中文分别是：速度，松开，回调。

速度speed：以毫秒为单位，决定了你元素执行到结束的时间

松开easing：决定了你元素执行过程中的方式，具体可以百度

回调callback：回调方法，可以给与一个方法体。

toggle()

通过这个方法呢大家就可以在show和hide中切换了。当然它也具备上面的参数值，这样大家就能够比较快速的去制作一个显示隐藏效果的东西了。

淡入淡出和滑动

这两个东西能够在显示隐藏的基础上制作出来，只是更加的快捷那么我们可以来看下他们是如何使用的。

在JQuery中我们是通过fadeIn()和fadeOut()来实现淡入淡出效果的。用

例子：

//fadeIn和fadeOut 输入输出动画
$(".btn").click(function () {
    //隐藏 = 淡入
    $("p").fadeOut();
});
$(".btn").dblclick(function () {
    //显示 = 淡出
    $("p").fadeIn();
});
//slideDown和slideUp 滑动效果
$(".btn").click(function () {
    //隐藏 = 滑入
    $("p").slideUp();
});
$(".btn").dblclick(function () {
    //显示 = 滑出
    $("p").slideDown();
});

学习时可以一下一下的去尝试效果。

这四个方法中也是具备相同参数的，既然都一样，那怎么能没又toggle()来凑热闹呢。

在淡入淡出还有一个fadeTo()方法

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

给出一个实例：

演示 fadeTo() 使用不同参数
点我让颜色变淡

android也学习前端，上手真的很快啊，在这里安利一下大家课外都学习数据结构和算法和网络协议，这东西是更新带不走的。