自定义动画animate

开发工具与关键技术：VS，MVC
作者：陈梅
撰写时间：2019年6月2 日
所有代码来源与老师教学
这次分享一个好玩的自定义动画效果，这次还是用jQuery做出来的小功能。这次我们先直接看最后已经布局好的效果。

把所想写的内容填写到p标签中，给到p标签的动画功能是，页面已执行时，p标签的内容就会渐渐消失。在给一个紫色的div盒子，这个盒子要实现四种动画效果，所以给这四个动画效果一个下拉框，选择一个动画样式，就执行一个动画效果。页面布局代码就不再一次展示了，最后的效果图已经很明显了。现在看一下jQuery的代码部分。

实现这些小功能前，我们还要先引用一下jQuery的插件，在jQuery中，animate()是为了实现那些复杂，以前学习到的动画函数都实现不了的动画。而这里的p标签就是运用了animate的动画样式。还可以用到fadeOut()属性来实现p标签的动画，它的写法是这样的：$(“p”).fadeOut(3000);而animate的写法是：$(“p”).animate({opacity: 0}, 3000);从这句代码看出animate的写法会好点，再看一下它们最后的效果动画，就更明显了。animate属性动画有四个参数参与,第一:properties,它包含作为动画属性和终值的样式属性和及其值的集合。第二：duration，它是执行动画的事件，它可以是三种预定速度值的字符串，在之前的文献中就说过动画速度快慢的字符串了，它不但可以表示动画执行的速度，还可以表示动画的时长的毫秒数值。第三:easing,它是一个过渡效果的属性，它还默认了linear和swing这两个参数。第四：complete,它是动画完成了再去执行的一个函数。animate()元素，是允许我们在任意的数值的css属性上创建动画。所以给div一个执行动画按钮点击事件，第一步先获取下拉框的值，然后在进行判断选中的下拉框值，第一个动画是，执行是宽度变小，高度变高，所以要给动画一设置变化的宽高，第二个动画是宽度增加，高度减少，同样的，给第二个动画设置变化的宽高。第三个动画是div里面的字体变大，与上两个同理。第四个动画是div全部退出，消失。最后我们来看一下这四个动画的效果吧！




四个动画效果已经展现出来了，特别注意的是第三个动画效果，当选择动画三的时候，div字体变大，字体动画完成时就会弹出一个提示框，提示你动画已经执行完毕。这四个动画的共同点就是动画时改变原来的样式的宽高，来达到动画的效果。这样animate()的动画小功能已经介绍完毕。