1. 首先创建一个新的html，在body下面输入源代码；div标签代表的是颜色的面板，button标签代表的是按钮
2. 当我们输入好了源代码之后呢，那我们的源代码部分已经完成了，接下来剩下的就只有css样式和jQuery函数了
   
3. 接下来我们先完成css样式的代码，因为这个案列的话没什么必要创建一个css文件然后又得链接过去，这就比较麻烦，于是我们选择用内部样式来完成效果，只需要在顶部title标签下面创建一个style的标签就好了，这style代表的就是样式设置标签
4. 当我们创建好了style标签之后，我们就可以设置样式了，首先我们源代码中只有一个div标签，所以我们直接选择div标签，意思就是选择源代码中的所有div标签进行设置，首先我们设置宽度为100个像素，高度为100个像素，下外边距为10像素，背景颜色随便选，这里的参数都是随便设置的，如果需要的话，可以自己设置。
   
5. 当我们写到这里的时候，说明我们的案列已经完成了一大半了，接下来就是完成js的部分了，首先我们先输入一个script，这里就是内部的js代码，意思也是跟style一样的，如果创建一个js文件的话也是要链接的，为了方便简洁，就不需要链接过去了
6. 然后我们写到这里，我们的动画还是需要插件来完成的，所以我们在script标签下面继续添加一个script用来链接插件，因为我jq版本只有3.6.0，所以比这个版本高的都可以使用的
7. 当我们创建好了script标签之后，我们现在源代码的div标签和button标签添加个属性名为id名，之后我们在script标签输入js的代码，这个是我们的单个动画的设置方法，$(‘dan’)，这段代码的意思就是js中使用document的方法是一样的，只不过是换了一种方法，使得语言更简单简洁了，然后再后面添加一个点击事件的函数，然后通过$这个符号来获取body中的div所匹配的标签，然后再后天添加个动画函数animate然后再下面写入动画的属性和属性值，一般的话只有宽高字体，背景颜色之类的是没有效果的，如果你想把这动画更加抽象，你可以在结尾括号后面添加动画的时间，属性和属性值可以随便设置，只要自己喜欢就可以了
   
8. 接下来是我们多个动画的设置，多个动画意思就是点一次按钮执行一次代码，具体的设置也是跟我们单个动画设置是一样的，只是我们在每个属性的括号后面再添加一个animate来设置
   
9. 最后来看看我们的效果，只要打开浏览器，点击按钮div标签能更换颜色的，那就表示你已经完成了这个效果
   
   这是我所学到的自定义动画了，所以我要分享给你们，希望可以帮助到你们。
   以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！