动画隐藏与显示

开发工具与关键技术：VS，jQuery
作者：陈梅
撰写时间：2019年5月14日
所有代码来源与老师教学
这次分享的是jQuery里的动画的隐藏与显示功能，主要分享的元素是show()，hide()，toggle()这三个元素。
现在看一下htlm和css的布局部分

在css中运用了css3的动画效果，在这之前我也分享过一个有关css3技术的功能，所以就不多解释了，但是有几个元素还是值得一提，transition为过渡的一个元素，用于过渡属性，，过渡函数，过渡时间和延迟时间等功能操作。还可以用transform元素来事项动画效果，例如rotate()旋转，向X轴扭曲skew()，向Y轴扭曲skew()，scale()缩放，还有translate元素，它是可以向X轴走动多少或向Y轴走动多少，或者同时向X轴和Y轴的走动。还有animation元素，它可以实现动画时间的多少，播放函数，延迟动画的时间，还有动画播放的次数，如果搭配infinite来使用，那就实现了动画的无限播放，没有次数。
下面来看一下jQuery的代码部分：
$(function () {
$(“button”).first().click(function () {
$(".demo").hide();
});
$(“button:eq(1)”).click(function () {
$(".demo").show(3000);
});
}); hide()的功能是隐藏显示的元素，就是把想要的隐藏掉。如果想要隐藏掉的事物已经是隐藏状态就不能在用hide()元素，只能使用show()把它显示出来。Hide()的隐藏方式有几种，在这里的是不带任何参数和任何的动画效果，把盒子进行隐藏。还有其他隐藏的方式有hide(”slow”)带参数不带动画效果的隐藏，hide(2000)两秒只能不带动画效果隐藏，hide（”fast”,function(){ alert(“Animation Done.”);}）用200毫秒迅速将东西隐藏，然后就会随之弹出一个对话框。hide({ duration: 1000, complete: function(){ alert(‘执行1000ms动画完毕’);这个是带动画效果去隐藏东西的效果，其中complete为动画执行完成时再执行函数。显示show（3000）就是在三秒内显示出来。我们来看一下效果，


点击隐藏div1时，div1盒子就会相应的隐藏掉，再次点击显示div1时，div1盒子又会显示出来，这就是hide()和show()的功能显示。还有个元素就是toggle()，他只需一个按钮就把hide()和show()的功能结合在一次。
$("#btntoggle").click(function () {
$(".demo1").toggle(3000);
}); hide（）和show是需要判断div1是都已经隐藏或则显示，才能实现其相应的功能，而toggle()就不用判断。它都能把hide()和show()的功能都显示出来。

点击显示与隐藏切换toggle方法按钮，蓝色盒子会带着动画效果一起隐藏，点击显示与隐藏切换toggle方法按钮，蓝色盒子也会随着动画效果的显示出来。因为在布局css是就给盒子设置了动画样式，所以把鼠标移进盒子时，盒子的颜色会根据设置时的颜色变化，有个颜色变化效果，但鼠标移出时，盒子就会变回原先的颜色，就是蓝色。颜色变化的动画效果在这不好展示，所以这个你们后续再去试试。隐藏和显示的技术就分享到这里了。