当我们想要隐藏页面中的某个元素时，我们就会想到在css样式中使用hover伪类。 通过给元素设置hover属性来实现隐藏效果。 而且这种方法只适合隐藏少量元素。 后期我们想要隐藏其他元素的时候就会很麻烦，需要一一添加属性。 然后我们将学习如何使用jQuery来隐藏元素hide。
首先搭建页面的基本样式，放几个按钮标签作为按钮：
其次，我们为标签设置css样式，并使用按钮标签作为点击事件。 div标签就是我们需要隐藏的
元素。 我们需要达到的疗效是jquery使元素隐藏，当我们点击它们对应的按钮时，就会触发对应的疗效。
当我们点击小方块1的隐藏元素按钮时，我们的小div1方块就会进行隐藏操作，点击显示按钮时，小div1方块就会显示出来。 同理，第二个小方块也是同样的操作。 当我们第一次点击按钮时，小方块需要隐藏，第二次点击才会显示出来。
这里需要注意的是，我们在两个小方块的样式中设置了hover伪类。 只有当我们的键盘移动到小方块时才会显示hover属性中包含的样式。 如果想要隐藏疗效，还需要显示属性。
在第二个小方框中，我们使用了css动画，并设置了动画的运行时间、播放功能和次数等（见图片注释）。
我们继续说题外话。 我们用不同的方法来论证这两个小方块的疗效。 首先，对于小方块，我们直接使用hide()方法。
首先介绍一下，speed是指动画的运行时间，easing：（可选）是指切换效果，fn：动画完成时执行的函数，每个元素执行一次。 当我们理解了它们之后，我们就会将它们带入模式并使用它们。 动画的运行时间可以随意改变。 你可以将它的值更改为更大或更小的值，这就是为什么我们会发现动画运行的速度会有很大的不同。
点击运行即可查看小方块的隐藏和显示效果。 再次编写jQuery代码时记得插入jQuery插件，否则会报错。
这里可以看到div1这个小盒子已经被我们隐藏了，并且是通过toggle()的方式连接起来的。
仔细观察后我们会发现，这两个方法似乎没有太大区别，但是toggle()方法应该相应地更简单、更方便。 由于我们为第二个小方块设置了动画效果jquery使元素隐藏，所以当我们点击按钮时也会触发css动画效果。 他会逐渐消失，又逐渐出现。 疗效需要自己慢慢观察。
