jQuery自定义动画

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

这是我所学到的自定义动画了，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

jQuery自定义动画相关推荐

jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
目录 jQuery预制动画显示隐藏动画上拉下拉动画(高度动画) 淡入淡出动画(透明度动画) jQuery自定义动画 jQuery停止动画和延迟动画等 jQuery预制动画 jquery的预制动画 ...
jQuery自定义动画方法animate()
animate()方法执行CSS属性集的自定义动画,该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值,由于属性值是逐渐变化的,所以就形成了所谓的动画效果. 用法: $(selec ...
jQuery—自定义动画
演示视频 // Html部分<button>操作属性</button><button>累加属性</button><button>关键字< ...
jquery自定义动画animate方法
示例效果: 示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
jQuery自定义动画王者荣耀手风琴效果
分析: ①鼠标经过某个小li 有两步操作: ②当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 ③其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 <!doctyp ...
【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介 animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画 jQuery笔记目录简介 j ...
jQuery之animate自定义动画
下面是对jQuery自定义动画的整理,希望可以帮助到有需要的小伙伴. jQuery的animate()方法可以用来自定义动画方法语法结构如下: animate(properties,duration ...
jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
java easing_[Java教程]jQuery Easing 动画效果扩展
[Java教程]jQuery Easing 动画效果扩展 0 2015-11-20 11:00:03 官网:http://gsgd.co.uk/sandbox/jquery/easing/ jQuer ...

jQuery自定义动画

jQuery自定义动画相关推荐

最新文章

热门文章