一.特效函数

jQuery框架提供了很多的特效函数。

$(selector).slideDown(time,callBack) ||  $(selector).slideUp(参数可有可无，但是不超过2个)

作用：可以让匹配的元素进行向下滑动或向上滑动。

第一个参数time：代表每一次的动画时间，单位：毫秒。

第二个参数callBack：回调函数。

总结：动态修改元素的高度。

$(selector).fadeOut  || $(selector).fadeIn

作用：可以给匹配元素添加淡出或淡入的特效。

总结：动态修改元素的透明度。

二.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>特效函数</title><script src="./js/jQuery.js"></script><style>*{margin: 0;padding: 0;}div{width: 200px;height: 200px;background:cyan;}</style>
</head>
<body><button>slideUp</button><button>slideDown</button><button>fadeOut</button><button>fadeIn</button><div class="cur"></div>
</body>
</html>
<script>//匹配第一个按钮：绑定单机事件$("button:eq(0)").click(function(){//匹配div：将div进行向上卷起$(".cur").slideUp(2000,function(){//当前这个函数：当动画结束之后，会立即执行1次console.log("我的动画结束了");});});//匹配第二个按钮：绑定单机事件$("button:eq(1)").click(function(){//匹配div：将div进行向下张开$(".cur").slideDown(2000,function(){//当前这个函数：当动画结束之后，可以做任意的事件$("div").css({"background":"red","borderRadius":"50%"});});});//匹配第三个按钮...$("button:eq(2)").click(function(){//匹配div：淡出效果$(".cur").fadeOut(2000,function(){//淡出效果结束了console.log("淡出效果结束了");});});//匹配第四个按钮...$("button:eq(3)").click(function(){//匹配div：淡入效果$(".cur").fadeIn(2000,function(){//淡入效果结束了console.log("淡入效果结束了");$(".cur").css({'background':'red','width':100});});});
</script>

三.效果图

篇章

上一篇：jQuery教程7-操作节点文本

下一篇：jQuery教程9-绑定事件

jQuery教程8-特效函数相关推荐

java 图片插件_[Java教程]10款功能强大的jQuery/CSS3图片特效插件
[Java教程]10款功能强大的jQuery/CSS3图片特效插件 0 2014-11-26 03:01:04 1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网 ...
jQuery-w3school（2020.2.16）【二、jQuery教程】
二.jQuery教程 (一)jQuery简介 1.jQuery 是一个 JavaScript 库.jQuery 极大地简化了 JavaScript 编程. 2. jQuery 库可以通过一行简单的标记 ...
jQuery教程~~~一文完结
目录前言: 一.jQuery简介二.jQuery安装三.jQuery语法四.jQuery选择器五.jQuery事件六.jQuery效果-隐藏和显示七.jQuery效果-淡入淡出八.滑动 ...
TypeScript入门教程之箭头函数
TypeScript入门教程之箭头函数亲切地称为粗箭头(因为->是细箭头并且=>是粗箭头),也被称为lambda函数(由于其他语言).另一个常用功能是胖箭头功能()=>some ...
jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
jquery中serialize()序列化函数
全栈工程师开发手册 (作者:栾鹏) jquery系列教程6-AJAX全解 jquery中serialize()序列化函数 serialize()序列化,将元素转化为xx=xx&xx=xx&am ...
jquery教程_jQuery教程
jquery教程 I have written a lot of jQuery tutorial articles. This is an index post for all the jQuery ...
python做表格教程_表格函数教程
表格存储触发函数计算示例之 Nodejs/Php/Java/C# Runtime 前言函数计算(Function Compute)是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只 ...
jQuery for Web Designers Web开发jQuery教程 Lynda课程中文字幕
jQuery for Web Designers 中文字幕 Web开发jQuery教程中文字幕jQuery for Web Designers JavaScript是网络的编程语言但是,使用100 ...

jQuery教程8-特效函数

文章目录

一.特效函数

二.源码

三.效果图

篇章

jQuery教程8-特效函数相关推荐

最新文章

热门文章